I am trying to make autocomplete using jqueryUi, but unable to bind data to it.
$("#CustomerName").autocomplete({
source:
function () {
$.ajax({
url: "SearchCustomer?key=" + $("#CustomerName").val(),
async: false,
dataType:"json",
success: function (data) {
return data.ResultList;
}
})
},
minLength: 0, autoFocus: true, delay: 1000
});
My Result of ajax is -
{"Message":null,"Successfull":false,"Id":0,"Result":null,"ResultList":["Customer 2","Kohl\u0027s Corp","Test Corp"]}
if i use this, then it work fine
$("#CustomerName").autocomplete({
source:["Customer 2","Kohl\u0027s Corp","Test Corp"],
minLength: 0, autoFocus: true, delay: 1000
});
Thanks in advance !
Nothing wrong with $.ajax, could you please wrap the returned data with the response like response(data.ResultList);
$("#CustomerName").autocomplete({
source: function( request, response ) {
$.ajax({
url: "SearchCustomer?key=" + $("#CustomerName").val(),
dataType : "json",
success: function (data) {
response(data.ResultList);
}
});
},
minLength: 0,
autoFocus: true,
delay: 1000
});
Related
I'm using jquery ui autocomplete.
My problem is when I use a call to a external json, the suggest function stops working.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: response
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Example of my code: codepen
Thanks in advance!
I suspect you could have found someone that answered this already. But here is a solution for you.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: function(jData) {
var results = [];
$.each(jData, function(ind, val) {
if (val.label.toLowerCase().indexOf(request.term) === 0) {
results.push(val);
}
});
response(results);
}
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/
The AJAX request will just return all the results, and that is what you are passing to your response. So if you do not filter that down before you pass it to response you will always end up with a complete list.
This filters the list using indexOf() but you can use any method you'd like.
Here is another solution that will cut down on your HTTP overhead:
var m = [];
$(document).ready(function() {
$.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) {
$.each(result, function(ind, val) {
m.push(val);
});
});
$('.comu').autocomplete({
source: m,
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/2/
This gets all the data once and populates an array. Autocomplete can then use this like normal.
Please, help.
html:
<select id="select-client" class="form-control" style="width: 350px;"></select>
js:
$("#select-client").select2({
ajax: {
url: _app.url + "finduser",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 2,
templateResult: formatClientRepo,
templateSelection: formatClientRepoSelection,
placeholder: "Enter user name"
});
And as result I've received this: http://prntscr.com/76jxvi
I found many variants, such as empty option in select, or write placeholder in select, but nothing.
https://jsfiddle.net/xqhp0z0x/1/
in this example if we delete || repo.text from formatRepoSelection it will not work. Because the repo.text is placeholder.
P.S. select2 4.0 do not need to empty option tag for placeholder working
I try to store an identifier into an hiddenfield when a value is selected with a jquery autocomplete field.
But the select event is never fired and I dont't see why..
here is my code
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
},
});
});
The autocompletion is properly working, I can see the values, select one but when I select a value nothig happens..
I believe your curly braces are wrong. select is being set as part of the ajax parameter, not autocomplete:
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
}
});
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
});
I have the following code using jqueryui and in the autocomplete box i see list but it doesn't show the content. The list has height of 0.
data is a json and i can see the data before the binding. Not sure what i am missing here.
$("#Stock").autocomplete({
dataType: "json",
source: data,
autoFill: true,
minLength: 1,
position: { my: "left to[", at: "left bottom", collision: "none" },
select: function (event, ui) {
alert(ui.item.Symbol)
},
open: function (e, ui) {
console.log($(".ui-autocomplete li").size());
},
search: function (e, ui) {
console.log("search returned: " + $(".ui-autocomplete li").size());
},
close: function (e, ui) {
console.log("on close" + $(".ui-autocomplete li").size());
$("#Stock").val("");
}
});
I have added the issue i am facing here.. Any help is much appreciated..
http://jsfiddle.net/BJGLf/
Currently you are passing [{Symbol: 'value'}] and the autocomplete is expecting ['value','value'] or [{ label: 'label', value: 'value' }, { label: 'label2', value: 'value2' }]. Refer to the API for the source formats.
I am using jquery autocomplete. I am facing some issues.
When scrolling through autosuggest in the populated list and hitting the enter key to
select, its not firing the event "select". I am setting a hidden field with the value that is selected. This works fine if i select the item using the mouse.
$(autoSuggestField).autocomplete({
source: function (request, response) {
$.ajax({
url: "../Transport/location",
dataType: "json",
data: {
"prefix": request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
value: item.Name,
x: item.Code
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$(codeField).val(ui.item.x);
//sets the value to hidden field.
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});