Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery autocomplete selection event

I have created jQuery UI autocomplete which is working very good. But my requirement is that what I display as list should also select same in text box. But it is not selecting For example list like XXX (XYZ) but when I select it only select XXX not XXX (XYZ) what I am missing !!

function getDeptStations() { $("#txDestination").autocomplete({   source: function (request, response) {     var term = request.term;     var Query = "";     if (lang === "en")       Query = "City_Name_EN";     else if (lang === "fr")       Query = "City_Name_FR";     if (lang === "de")       Query = "City_Name_DE";     if (lang === "ar")       Query = "City_Name_AR";     var requestUri = "/_api/lists/getbytitle('Stations')/items?$select=City_Code," + Query + "&$filter=startswith(" + Query + ",'" + term + "')";     $.ajax({       url: requestUri,       type: "GET",       async: false,       headers: {         "ACCEPT": "application/json;odata=verbose"       }     }).done(function (data) {       if (data.d.results) {         response($.map(eval(data.d.results), function (item) {           return {             label: item[Query] + " (" + item.City_Code + ")",             value: item[Query],             id: item[Query]           }         }));       }       else {        }     });   },   response: function (event, ui) {     if (!ui.content.length) {       var noResult = { value: "", label: "No cities matching your request" };       ui.content.push(noResult);     }   },   select: function (event, ui) {     $("#txDestination").val(ui.item.label);             cityID = ui.item.id;   },   minLength: 1 });  } 
like image 314
Milind Avatar asked Sep 25 '14 08:09

Milind


People also ask

What is the default value of appendTo option of autocomplete () method?

Option - appendTo By default its value is null. When the value is null, the parents of the input field will be checked for a class of ui-front.

Which are jQuery ui widgets?

a jQuery UI widget is a specialized jQuery plug-in. Using plug-in, we can apply behaviours to the elements. However, plug-ins lack some built-in capabilities, such as a way to associate data with its elements, expose methods, merge options with defaults, and control the plug-in's lifetime.


1 Answers

Almost there, just return a false from select event.

select: function (event, ui) {     $("#txDestination").val(ui.item.label);             cityID = ui.item.id;     return false;   }, 

or Simply

select: function (event, ui) {                   alert(ui.item.id);           return false;   }, 

This will guide jquery autocomplete to know that select has set a value.

Update: This is not in the documentation, I figured out by digging into source code, took me some time. But indeed it deserves to be in the doc or in options.

like image 56
SSA Avatar answered Sep 26 '22 08:09

SSA