I'm creating my own autocomplete feature based on vue.js and materializecss.
https://jsfiddle.net/guanzo/kykubquh/5/
Right now it's working okay, except for a few things.
The normal behavior for an autocomplete is that once you select an item by pressing enter, or clicking, the value of the input becomes your selected item. So if you input "alab", and select the item "Alabama", the value of the input should become "Alabama", and the dropdown list disappears.
The problem is that the input is bound with v-model="query", meaning the value of the input is the value of "query", which is the value of the input.
Trying to change the input value with this.$el.querySelector('input').value = "Alabama" does nothing. My current workaround is to set the value of query to be the value of the selected state.
onSelect(state){
this.selected = state;
this.query = state.name//replace input val
}
A nasty side effect of this is that changing the value of query triggers another search, which causes the dropdown to reappear with the item "Alabama".
How do i change the value of an input that has been bound with v-model?
My attempted workaround is to call this.onBlurInput(); after the user selects an item, which hides the dropdown. However, the dropdown will no longer appear until you explicity refocus the input by clicking outside and back again.
Remove your focus and blur events and add the following line to your queryMatches. You really only want to show options when there is not an exact match.
queryMatches(){
if(this.query.length <= 1){
return [];
}
// check to see if the current value is already in the list
if (this.query === this.selected.name) return [];
console.log(this.query)
var reg = new RegExp(this.query,'gi')
var matches = this.states.filter(state=>{
return reg.test(state.name)
})
console.log(matches)
return matches
}
Here is an updated fiddle.
Related
how do I find out if my custom widget has focus in Dojo?
i have dojo editor i wnat to know if the editor has already focus or not?
you can use the module dijit/focus to find out the focus
FROM DOJO DOCS
Tracking active widgets
At any point in time there is a set of (for lack of a better word)
“active” or “focused” widgets, meaning the currently focused widget
and that widget’s ancestors. “Ancestor” can mean either DOM ancestor
(ex: TextBox –> Form), or a logical parent-child relationship (ex:
TooltipDialog –> DropDownButton).
For example, if focus is on a TextBox inside a TabContainer inside a
TooltipDialog triggered by a DropDownButton, the stack would be
TextBox –> ContentPane –> TabContainer –> TooltipDialog –>
DropDownButton.
The activeStack[] parameter indicates this set of widgets, and an app
can monitor changes to activeStack[] by:
require([ "dijit/focus" ], function(focusUtil){
focusUtil.watch("activeStack", function(name, oldValue, newValue){
console.log("Focused widget + ancestors: ", newValue.join(", "));
});
});
the question in title has a different answer than the one in the descriptions.
there are two ways achieving the question in the title, by using dojo's focusUtil ("dijit/focus"). both ways give you something that you could find the widget using it and the dijit's registry ("dijit/registry").
focusUtil.curNode: gives you the DOM Node that currently has the focus. the function below, you could get the widget reference.
function getWidgetByNode(node){
var result;
while (!result && node){
result = registry.byNode(node);
if (node.parentElement)
node = node.parentElement;
else
node = null;
}
return result;
}
var focusedWidget = getWidgetByNode(focusUtil.curNode)
focusUtil.activeStack: gives you an array of the widgets (parent to child) that has the focus. so the last item in the array is the direct widget which has the focus. index values are widget ids, so you should get the widget by the following code
var focusedWidgetId = focusUtil.activeStack[focusUtil.activeStack.length-1];
var focusedWidget = registry.byId(focusedWidgetId);
now if you want to know if the currently focused widget is some specific one, it depends on what you have in hands from that specific widget:
widget itself: like the return values of above samples. now you have to compare if these are the same thing. you can not compare two widget objects using the == operator. you could compare their ids like this:
myWidget.id == focusedWidget.id
widget's id: this way you just easily get the id of the current node from focusUtil and compare it with the id you have liek this:
myWidgetId == focusedWidgetId
references:
http://dojotoolkit.org/reference-guide/1.9/dijit/focus.html
http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
require([ "dijit/focus" ], function(focusUtil){
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
check blow url here you can see some examples
http://dojotoolkit.org/reference-guide/1.8/dijit/focus.html#dijit-focus
a) For dojo 1.6: call dijit.getFocus(). This will return an object containing the currently focused dom node, among other things (selected text, etc.). To get the corresponding widget, simply do:
var activeElement = dijit.getEnclosingWidget(dijit.getFocus().node);
This is the full reference for dijit.getFocus(), from the source code:
// summary:
// Called as getFocus(), this returns an Object showing the current focus
// and selected text.
//
// Called as getFocus(widget), where widget is a (widget representing) a button
// that was just pressed, it returns where focus was before that button
// was pressed. (Pressing the button may have either shifted focus to the button,
// or removed focus altogether.) In this case the selected text is not returned,
// since it can't be accurately determined.
//
// menu: dijit._Widget or {domNode: DomNode} structure
// The button that was just pressed. If focus has disappeared or moved
// to this button, returns the previous focus. In this case the bookmark
// information is already lost, and null is returned.
//
// openedForWindow:
// iframe in which menu was opened
//
// returns:
// A handle to restore focus/selection, to be passed to `dijit.focus`.
b) For dojo 1.7 and up, use dijit/focus:
require([ "dijit/focus" ], function(focusUtil) {
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
Here's my problem: in my application I have a Dojo EnhancedGrid, backed up by an ItemFileReadStore. The page flow looks like this:
The user selects a value from a selection list.
The item from the list is posted on a server and then the grid is updated with data from the server (don't ask why, this is how it's supposed to work)
The new item is highlighted in the grid.
Now, the first two steps work like a charm; however, the third step gave me some headaches. After the data is successfully POSTed to the server (via dojo.xhrPost() ) the following code runs:
myGrid.store.close();
myGrid._refresh();
myGrid.store.fetch({
onComplete : function(items) {
for ( var i = 0; i < items.length; i++) {
if (items[i].documentType[0].id == documentTypeId) {
var newItemIndex = myGrid.getItemIndex(items[i]);
exportMappingGrid.selection.deselectAll();
exportMappingGrid.selection.addToSelection(newItemIndex);
}
}
}
});
Now, the selection of the grid is updated (i.e. the selection object has a selectedIndex > 0), but visually there's no response, unless I hover the mouse over the "selected" row. If I remove the .deselectAll() line (which I suspected as the culprit) then I sometimes end up with two items selected at once, although the grid selectionMode attribute is set to single.
Any thoughts on this one?
Thanks a lot.
You need to use setSelected(), like so
exportMappingGrid.selection.setSelected(newItemIndex, true);
The second parameter is true to select the row, false to unselect it.
This is what works for me:
grid.selection.clear();
grid.selection.addToSelection(newItemIndex);
grid.selection.getFirstSelected();
Jon
I want to change the font color of a row after a cell in that row has been edited and set to a certain value.
myStore is the dojo.data.ItemFileWriteStore associated to the dojox.grid.DataGrid dataGrid.
I have written this:
myStore.onSet = function(item, attribute, oldValue, newValue) {
if (item.myField == myValue) {
var index = dataGrid.selection.selectedIndex;
dojo.style(dataGrid.getRowNode(index), "color" , "red");
}
}
but unfortunately this doesn't make any effect...
UPDATE: I added the following style property: "backgroundColor" : "red". Well, the background color of the row changes to red, but when the mouse moves away from the row, the color changes back to the default! It might be that some default event handlers restore the default styles...
The dojo.style line works if you call it by itself. Either your function isn't being called at all, the if's condition false or there is no row selected and you are getting an invalid number for the index. (You can put some console.logs there to check)
I have a Dojo form that does not contain a submit button. Instead, I added an onkeypress handler to calls a method when Enter is pressed. The problem I am having is that when I hit enter before blurring off the current field, the _process method thinks that field is empty.
Or in other words: type in field1. hit tab. type in field2. hit enter. field2 is blank unless i click off the field or shift-tab back.
Any ideas?
dojo.connect(dijit.byId("fkrform"),"onKeyPress",function(e) {
if (e.keyCode == dojo.keys.ENTER) {
_process();
}
and the method it calls:
function _process()
{
var field1 = dijit.byId("field1").value;
var field2 = dijit.byId("field2").value;
alert(username);
alert(password);
...do stuff...
}
The fields are of dojoType: dijit.form.TextBox, and the form is: dijit.form.Form
Use dijit.byId('field1').get('value') instead of directly try to access the property "value". In your example you saved the value in the variable field1 and field2 and in the alert you use the variable username and password could be the answer why you don't get anything. But you still should use the get method to get a property instead of directly access the property.
When you press "Enter" your form will submit. So you need to connect to the "onSubmit" event on the form, instead of onkeyPress or onKeyUp.
The first example i created prints the value of the input box on every key someone pressed in the console.
http://jsfiddle.net/a8FHg/
But what you really wanted was hooking into the submit. I modified the example. The new example connects to "onSubmit" and creates an alert box with the text of the user input.
http://jsfiddle.net/a8FHg/1/
For completness if jsfiddle doesn't work some day. You JavaScript should looks like this.
dojo.ready(function(){
var form = dijit.byId('form');
var box = dijit.byId('box');
var submit = function(event) {
dojo.stopEvent(event);
alert("User input was " + box.get('value'));
};
dojo.connect(form, 'onSubmit', submit);
});
Assuming your form in your HTML has the id form and your box have the id box.
I am new to flex.
I need your help. Can anyone help me please.
My Requirement:
Flex Datagrid should be filter based on 3 checkboxes.(Checkboxes can be checked with several combinations).
My Code:
Checkboxes:
Data Provider:
MXML code:
Here i have to filter the datagrid when i check the different combinations of 3 checkboxes.
The checkbox values are from Staus column of arraycollection.
When i select 'completed' checkbox and 'onhold' check box, datagrid should display only those records which have Status as "Completed" & "On Hold".
Similarly for all combinations of c
Can anyone give simple solution please ?
Thanks,
Anand.k
Use an ArrayCollection as your dataProvider and assign a filtering function to its filterFunction property :
var provider:ArrayCollection;
At the part where you instantiate your array, give it a filterFunction :
provider.filterFunction = myFilteringFunction;
With the code of the filterFunction like this :
private function myFilteringFunction(item:ObjectTypeInYourArray) : Boolean {
var show:Boolean;
if(item.completed == checkBox1.checked &&
item.onHold == checkBox2.checked){
show = true;
}
return show;
}
It's an example with two checkboxes. The type of value assigned to the completed and onHold attributes of your object may not be boolean so you'll have to convert them somehow before comparing them to the state of the checkboxes but I think you get the idea.
Basically the filterFunction that you pass to your arraycollection is applied to each of the items inside and return true or false depending on you code inside (e.g check if the object has the right values for its properties). When true the values are showed
At the change events of your checkboxes, you refresh the dataProvider :
provider.refresh();
Hope that helps