i have been trying to figure this out lately but i can't
the problem is that i have an input field with type text that i need to get the current input data when the values from the autocomplete are selected. Note i am using jQuery UI autocomplete.
i can catch the keyup event but when a user uses clicks on the autocomplete values. jQuery does not fire the change event handler, i tried using every event handler there is but to no avail.
i think it cannot catch a DOM based manipulation of an element? i'm not sure. here is a
fiddle
Like this http://jsfiddle.net/PUpRr/
select options should do the trick.
Options/events/methods API documentation : http://api.jqueryui.com/autocomplete/
Hope this fits the needs :)
Sample code
$("#to").autocomplete({
source: function (request, response) {
var friendsArray = [];
friendsArray = [{
"id": 1,
"name": "hulk",
"value": "hulk"
}, {
"id": 2,
"name": "ironman",
"value": "ironman"
}, {
"id": 3,
"name": "Foobar",
"value": "Foobar"
}];
response(friendsArray);
return;
},
select: function (e, ui) {
alert("selected!");
},
change: function (e, ui) {
alert("changed!");
}
});
Chrome had issues retaining the ui for clicked changes, so I added a mousedown handler for the individual popup list anchor tags in the autocomplete open: event. It's also a good place for styling the list:
function onItemTypeAheadListOpen(e, ui) {
// Stub for list click issues
$('.ui-autocomplete a').mousedown(function () {
lastItemClicked = this.innerText;
});
// Override default list style
$('.ui-autocomplete').css('z-index', '600');
$('.ui-autocomplete').css('width', '480px');
}
Related
I'm having trouble getting checkbox events to fire, specifically enable_checkbox and disable_checkbox
My code to init jsTree is:
$('#contenteditor-hierarchy').jstree({
"plugins": [
"checkbox"
],
"checkbox": {
"visible": true,
"tie_selection": false,
"whole_node": false
},
"core": {
"check_callback": true,
"data": {
"url": function (node) {
//...
},
"type": "get",
"data": function (node) {},
"dataType": 'json'
}
}
});
and I have tried:
$tree.bind('enable_checkbox.jstree', function() {
alert('test');
});
// and...
$('#contenteditor-hierarchy').on('enable_checkbox.jstree', function() {
alert('test');
});
// as well as..
$(document).on('enable_checkbox.jstree', function() {
alert('test');
});
for the interim, a not so classy hack; the below works for me:
$('body').on('click', '.jstree-checkbox', function(e) {
// at the time of this event firing, jstree hadn't finished handling the click event
// so I had to timeout....
setTimeout(function() {
console.log($tree.jstree(true).get_checked());
}, 200);
});
However in neither attempt was an alert actually fired.
The API docs is quite vague so wondering if anyone is aware of where I am going wrong.
Based on the code with the click event and the setTimeout, I would say that what you are trying to achieve is to set an event to detect when the checkbox is checked or unchecked.
If that is the case, you should use the events check_node.jstree and uncheck_node.jstree respectively.
I am using paramquery grid component in which I am trying to use autocomplete.
Column Model for branch:
{ title: "Branch", dataIndx: "branchId", width: 150,
filter: { type: "select",
condition: 'equal',
prepend: { '': '--All--' },
listeners: ['change'],
valueIndx: "branchId",
labelIndx: "branchName",
options: branchList,
},
editor: {
type: "textbox",
init: autoCompleteEditor
//type: function (ui) { return dropdowneditor(this, ui); }
},
render: function (ui) {
for (var i = 0; i < branchList.length; i++) {
var option = branchList[i];
if (option.branchId == ui.rowData.branchId) {
return option.branchName;
}
}
}
}
autoCompleteEditorMethod:
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
//initialize the editor
$inp.autocomplete({
source: function(request, response) {
var rows = imAutocompleteJSONParse(branchList);// this method converting my JSON object into Value and label format.
return response(rows);
},
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#search").val(ui.item.label);
}
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
I get branch id into my grid and I have branchList JSON which have branch id & branch Name. Inside grid my render function showing branchName on UI.
But when I click on searchable dropdown I'm getting branch id.
Below snapshot may explain my issue properly.
Summary of issue: I am getting branch id in Grid. With help of render method I am able to show branch name on grid. but when I click on textbox I getting branch id.
http://jsfiddle.net/v4zx8tjc/4/
Like blackmiaool suggests in his comment, this question would be easier to answer with a live demo using something like JSFiddle.
Based on what I can see in your question, which isn't that much, there are a few areas I would take a second look at.
The Source function in JQuery.autoComplete. Where is branchList coming from? I don't see it declared anywhere and why are you not using the 'request' param?
Not sure what your custom properties are doing but it might be a good idea to verify those are not interfering with the results.
Edit 1: Looking back at the code you posted I think I see where your branchList variable is coming from. It would be very helpful to see your imAutocompleteJSONParse() method because I believe that may be where things are breaking down.
Im trying to find a way I can suppress the changedevent in jstree when loading a dynamic context menu (right click). I'm aware that you can suppress the select_node event in the context menu but I need to get the node id of the node that I am right clicking on. (and therefore need to use the select_node). I know that you can suppress that changed event when calling select_node regularly, but I'm not sure how to do it when right clicking. I tried the following with the context menu select_node, but it did not work:
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
"variant": "small",
"icons": false
}
},
"contextmenu": {
"items": reportMenu(node), //builds context menu based on selected node
},
"plugins": ["contextmenu", "changed"]
});
});
$("#myTree").bind('select_node.jstree', function (event, data) {
// Does not work, changed event still fires.
$("#myTree").jstree().select_node(data.node.id, true);
});
I'm looking for one of the possible alternatives:
How can I suppress the changedevent when the context menu calls select_node?
How can I get the id of the node I am right clicking on without calling the select_node event (i.e. If I set my contextmenu to 'select_node': false, how can I capture the select node)?
Finally, I think you can get what you want changing your code a little.
Check demo - codepen.
$('#myTree')
.jstree({
'core': {
'data': ...
},
'plugins': ["contextmenu"],
'contextmenu': {
'select_node': false,
'items': reportMenu
}
});
function reportMenu(node) {
// access node as: node.id);
// build your menu depending on node id
return {
createItem: {
"label": "Create New Branch",
"action": function(obj) {
this.create(obj);
alert(obj.text())
},
"_class": "class"
},
renameItem: {
"label": "Rename Branch",
"action": function(obj) { this.rename(obj); }
},
deleteItem: {
"label": "Remove Branch",
"action": function(obj) { this.remove(obj); }
}
};
}
I'm trying to use jQuery Autocomplete to redirect a user to a url based on the input selection. I've seen other questions that address parts of my problem, but I am having trouble putting it all together to provide the following functionality:
Trigger redirect on selection of item, as well as on enter key press and/or button click.
Jsfiddle Demo --> http://jsfiddle.net/wfaxvm43/5/
Sources:
http://jsfiddle.net/DLLVw/
jQuery autocomplete trigger button on select
JQuery Autocomplete: Submit Form on selection?
$(function () {
var stateList = [{
"value": "Tennessee",
"url": "http://www.tennessee.gov"
}, {
"value": "Texas",
"url": "http://www.texas.gov"
}, {
"value": "Colorado",
"url": "http://www.colorado.gov"
}, {
"value": "Connecticut",
"url": "http://www.ct.gov"
}];
$("#states").autocomplete({
source: stateList,
select: function (event, ui) {
go(ui.item.url);
// On enter key
// if (event.keyCode == 13) {}
// On button click
//$(#'zip-form').submit()
},
response: function (event, ui) {
if (!ui.content.length) {
$("#no-result").show();
} else {
$("#no-result").hide();
}
}
});
});
function go(url) {
window.open(url);
}
Added autoFocus: true; to focus on the first item in the results. Then had to get the url from the focused item.
focus: function (event, ui) {
currentUrl = ui.item.url;
}
function btnGoClick() {
if (currentUrl !== "") go(currentUrl);
}
Added .keypress mapped to 13 (enter key) on the input field for enter key redirect.
$("#states").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
btnGoClick();
}
});
Also set a specified url if no match was found.
http://jsfiddle.net/wfaxvm43/8/
I am using jstree for a tree view in a web page.
The tree makes possible to rename and move nodes. Moving or renaming a node fires the rename_node.jstree and rename_node.jstree events.
With new nodes (created with rename_node.jstree events), the node can still be renamed and moved but the move_node.jstree and rename_node.jstree events are not fired.
It seems that the events are only bound with the inital nodes. I don't see any 'live' method to bind the events with nodes created after.
Is there any possibility to do that?
Here is a sample that helps (I hope) to understand my problem:
$(function(){
$("#nodes").jstree({
"plugins" : [ "themes", "html_data", "dnd", "ui", "crrm" ]
}).bind("move_node.jstree", function (event, data) {
alert('move');
}).bind("rename_node.jstree", function (event, data) {
alert('rename');
}).bind("create_node.jstree", function (event, data) {
alert('create_node');
})
$("#create_button").click(function () {
$("#nodes").jstree("create",null,"last",{data:"name"});
});
});
The command is create_node, not create, I think. See http://www.jstree.com/documentation/core for more details.
FYI, your code would be better written as:
$(function() {
$("#nodes").jstree({
"plugins": ["themes", "html_data", "dnd", "ui", "crrm"]
}).bind("move_node.jstree rename_node.jstree create_node.jstree", function(event, data) {
var type = event.type;
alert(type);
if (type === 'move_node.jstree') {
//handle move_node.jstree here
} else if (type === 'rename_node.jstree') {
//handle rename_node.jstree here
} else if (type === 'create_node.jstree') {
//handle create_node.jstree here
}
});
$("#create_button").click(function() {
$("#nodes").jstree("create", null, "last", {
data: "name"
});
});
});
I know that is subjective, but take it for what is worth.
It seems that the events are fired correctly. The problem was somewhere in the logic. I had to set the id of the item too to be handled correctly.
$("#nodes").jstree("create",null,"last",{data:the_name, attr: {id: the_id}});
Sorry for this mistake.