Menu
I am trying to implement autocomplete jQuery, but am not understanding the autocomplete function that jQuery UI provides.
It uses a callback function and gets the response as a label/value pair. I have some sample code where I am trying to pass an arbitrary label/value pair back and display that option but it isn't working. If someone can help me out with that or show me a simple program it will be great.
http://jsfiddle.net/kB25J/
HTML:
<html>
<body>
Please enter your country name
<input id ="book" type="text" value="">
</body>
</html>
JavaScript:
$("#book").autocomplete({
source: function(request, response) {
alert(request.term);
response(function() {
return {
label: "hi",
value: "bye"
}
});
alert(reponse);
}
});
Thank You
941
When sending response, pass an array instead of function.
$(function() {
$("#book").autocomplete({
source: function(request, response) {
var data = [{
label: "hi",
value: "bye"
}];
response(data);
},
select: function( event, ui ) {
$( "#book" ).val( ui.item.label); //ui.item is your object from the array
return false;
}
});
});
You should be returning an array in your source even if its just 1 match in this case 'hi'/'bye'
As seen in this example on jqueryui.com
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
Its returning an array of key/value pairs for label/value using a map on the remote response.
If your source is just a list of countries you can just use an array of strings as your source.
var countries = ["USA", "Canada", "Mexico", ...]
$('input').autocomplete({
source : countries
});
If you are working with a remote source:
$('input').autocomplete({
source : function (request, response) {
$.ajax({
url: "url_to_get_countries",
dataType: "json",
success: function( data ) {
response( $.map( data.countries, function( item ) {
return {
label: item.country_name,
value: item.country_id
}
}));
}
});
}
});
@LakshmikanthanVijayaraghavan
As you can see at Autocomplete guide, there are three ways to implement autocomplete with jquery plugin.
The first two options are for a fixed list of values. If you want to populate the autocomplete list dinamically, you have to implement the last one.
To do that, you have to specify an url to get the objects array. If you want to keep the label and the key hidden, you need to create an input type hidden and set his value too.
For example
$( "#book" ).autocomplete({
source: "getValues.htm",
select: function(event, ui) {
$( "#book" ).val(ui.item.label);
$( "#book_hidden" ).val(ui.item.value);
return false;
}
});
getValues.html must return the array of label/values pair.
Hope this helps
21
Ajax , Key Value pair ,Min Length to trigger search. Simple Code
<script>
$(function () {
$("#CompanySearch").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Admin/GetCompanyAutoComplete',
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
});
},
minLength: 2
});
});
</script>
For more
https://stackoverflow.com/a/40883309/5237614
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
