Currently, I am working on an autocomplete component using jQuery UI. Although the autocomplete function is working correctly, I am facing an issue where typing the letter "I" displays all the list items available from JSON data, whereas I only need to show relevant matches like "India", "Indonesia", etc. Additionally, I would like to limit the displayed values to a maximum of 10 in the list. I have made some updates to the code by attempting to use slicing in the autocomplete functionality to achieve this and then display the selected value in the next textbox.
Below is the latest jQuery code snippet:
$("#ipt_Countryres").autocomplete({
source: function( request, response ) {
var regex = new RegExp(request.term, 'i');
$.ajax({
url: "json/countries.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
response($.map(data, function(item) {
if(regex.test(item.label)){
return {
id: item.id,
label: item.label,
value: item.value
};
}
}));
},
minlength:2,
select: function (event, ui) {
$("#get_country").val(ui.item.label);
}
});
}
});
Here is the corresponding HTML code:
<input type="text" id="ipt_Countryres" name="ipt_Countryres" class="ipt_Field"/>
<input type="text" class="ipt_Field" id="get_country" name="get_country"/ disabled>
Sample JSON data used:
[
{
"value":"Afghanistan",
"label":"Afghanistan",
"id":"AF"
},
{
"value":"Åland Islands ",
"label":"Åland Islands",
"id":"AX"
},
// Additional JSON data entries...
Your assistance in resolving this matter is greatly appreciated.
Thank you in advance.
Sincerely, Mahadevan