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 }); }
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.
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.
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.
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