I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete normally works.
It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.
To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.
Any ideas!?
Working Code - http://jsbin.com/aFeceTe/1/edit?html,js,output
$(document).ready(function(){
var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];
$("input").autocomplete({
source: test,
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Broken Code - http://jsbin.com/uyOGUVU/6/edit?html,js,output
$(document).ready(function(){
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Try this
$(document).ready(function(){
var temp = true;
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
temp = true;
return false;
}
}).focus(function () {
if(temp) {
$(this).autocomplete("search");
temp = false;
}
});
});
SEE DEMO
Related
I have a problem with a jquery plugin.
I just add a plugin like this :
$.ui.plugin.add("draggable", "smartguides", {
//
start: function(event, ui) {
console.log('TOTO');
}
//
}
I set my options there :
function draggableElementParameters(hash_id, is_smartguides)
{
var datas = {
containment:"#container_page",
scroll: false,
cursor:"pointer",
opacity: 0.35,
tolerance: 5,
cancel: "#cr-stage",
smartguides: '.element-container',
stop: function (event, ui) {
//
});
}, drag: function (event, ui) {
//
}
};
return datas;
}
Then I call it like this :
$("#element-edit").draggable(window.parent.draggableElementParameters({{ json_encode($element->hash_id) }}, Helpers.Utils.Cookie.isTrue('backend-contest-editor-is-draggable-help')));
And to finish, element-container is ok in my view.
The fact is the plugin is never triggered, the console.log never appear.
Any ideas about this bug ?
thank you !
I have an array of objects (assessorList), how can I set default text and value in the jquery autocomplete and trigger select. For example if I send second object from the array to the function then Assessor 2, Test should be selected with 1116512 in AutoCompleteAssessorID and all the statements under select should be executed for that selection.
My HTML:
<input style="width:300px" id="AutoCompleteAssessor"> <input type="hidden" id="AutoCompleteAssessorID">
My JavaScript:
var assessorList = [{ id:"1116542", label:"Assessor 1, Test"}, { id:"1116512", label:"Assessor 2, Test"}, { id:"1117290", label:"Carey, Peter"}]
function a(ID, Text)
{
$("#AutoCompleteAssessor").autocomplete({
autoFocus: true,
minLength: 3,
source: assessorList,
focus: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
return false;
},
select: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
userId = ui.item.id;
getEventData();
return false;
},
change: function (event, ui){
if(!ui.item)
{
$("#AutoCompleteAssessor").val('');
$("#AutoCompleteAssessorID").val('');
}
}
})
}
I tried $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}}); but i get $(...).data(...) is undefined error.
I have a form working with JQuery Autocomplete and it works fairly well. Now I need another element to force a user to select a valid choice in the autocomplete input. The can type whatever they want and everything is filtered by autocomplete. But they have to select something from the served list.
If they don't the inputfield must get blanked. Tried out a few things with change and select to no avail. This is the code of my autocomplete. I saw some examples operation with data instead of source. This seems to make a big difference
$(function () {
$("#sp_name").autocomplete({
minLength: 2,
delay: 300,
source: function (request, response) {
$.ajax({
url: "./Search/",
dataType: "json",
data: {
term: request.term,
zoekterm: $("#al").html()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.naam,
value: item.naam
}
}));
}
});
}
})
});
Try this:
I am using a local list here, but you can achieve this via json data source too.
Just add a change event. The only problem this can have is that if user does not click on
the suggestion, it will turn blank (even if user is entering the same text as suggestion).
It will be mandatory for user to click on the suggestion.
var list = ["c", "c++", "c#","Basic","Mongo"];
$('#auto').autocomplete({
source: list,
select: function (event, ui) {
$(this).val(ui.item ? ui.item : " ");},
change: function (event, ui) {
if (!ui.item) {
this.value = '';}
//else { Return your label here }
}
});
JsFidle for it: http://jsfiddle.net/sarcastic/7KdZP/112/
In your case, Change function would be something like this:
change: function (event, ui)
{
if (!ui.label) { this.value = ''; }
}
I am trying to use autocomplete which call a method on the server to populate the list.
Corresponding JS file calls
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
//Here I would like to send the parameters.
var itemid = ui.item.id;
alert(itemid);
// How to call another ajax method.
}
})
});
Call its search method inside select event. Try this.
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
$(this).autocomplete( "search" , ui.item.value );
}
})
});
I'm not sure if this is doable, but I would like to be able to set a jQuery UI event as a function (directly), as opposed to continuing to wrap in additional function(event, ui) { ... } wrappers.
Hopefully you can see what I'm going for from the example below.
Here is what I would like:
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
Now I would think that the above would work, since I'm simply trying to say "continue firing this event, just over to that function".
Unfortunately, that will not work, and I'm ending up with this: (and for some reason, a disconnect from all data)
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
The following two examples should both work in theory:
var dropdownSelect = function(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
And this:
function dropdownSelect(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
JavaScript functions are first class citizens, which means that you can treat them like any other object.
sure why not define that function first:
var dropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
var dropdownSelect = function(event, ui) { ... };
var onDropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: onDropdownSelect,
minLength: 0
});