autocomplete jquery suggestion not working

Question

I am working on autocomplete component from jquery UI. Though my auto complete working fine but If I type suggested letter "I" it was showing all the list which is available from json data where i need only the relevant letter for example if I type letter I "India", Indonesia etc,. And I need to show only max 10 values in the list. Here I have updated the latest code I am trying to do the slice in the autocomplete and i am trying to getting the same value in the next text box.

Here is the current jquery code

$("#ipt_Countryres").autocomplete({
 source: function( request, response ) {
      var regex = new RegExp(request.term, 'i');
      //var filteredArray = filteredArray.slice(0,10);
    $.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 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>

Here is my sample JSON data

[  
   {  
    "value":"Afghanistan",
     "label":"Afghanistan",
     "id":"AF"
   },
   {  
      "value":"Åland Islands ",
     "label":"Åland Islands",
     "id":"AX"
   },
   {  
     "value":"Albania ",
     "label":"Albania",
     "id":"AL"
   },
  {  
     "value":"Algeria ",
     "label":"Algeria",
     "id":"DZ"
  },
  {  
    "value":"American Samoa ",
    "label":"American Samoa",
    "id":"AS"
  },
  {  
     "value":"AndorrA ",
    "label":"AndorrA",
    "id":"AD"
  },
  {  
     "value":"Angola ",
     "label":"Angola",
     "id":"AO"
  },
  {  
     "value":"Anguilla ",
     "label":"Anguilla",
     "id":"AI"
  },
  {  
     "value":"Antarctica ",
     "label":"Antarctica",
     "id":"AQ"
  },
  {  
     "value":"Antigua and Barbuda ",
    "label":"Antigua and Barbuda",
     "id":"AG"

}]

Kindly please help me.

Thank in advance

Mahadevan

Answer 1

Try to add below code for filtering the values with start with regex,

$.ui.autocomplete.filter = function (array, term) {
   var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
   return $.grep(array, function (value) {
     return matcher.test(value.label || value.value || value);
   });
};

See more jqueryui-autocomplete-filter-words-starting-with-term

Answer 2

Try this:

var orignalArray = [  
  {  
    "id":"Afghanistan",
    "label":"Afghanistan",
     "value":"AF"
  },
  {  
  "id":"Åland Islands ",
  "label":"Åland Islands",
  "value":"AX"
   },
 {  
    "id":"Albania ",
    "label":"Albania",
    "value":"AL"
 }]
$("#ipt_Countryres").autocomplete({
   minLength:1,
    source: function(request, response) {
    var filteredArray = $.map(orignalArray, function(item) {
        if( item.id.startsWith(request.term)){
            return item;
        }
        else{
            return null;
        }
    });
  
  filteredArray = filteredArray.slice(0,10);
  
    response(filteredArray);
},
   select: function(event, ui) {
     event.preventDefault();
     // Prevent value from being put in the input:
     $('#ipt_Countryres').val(ui.item.label);
     $('#get_country').val(ui.item.label);
     // Set the next input's value to the "value" of the item.
   },
  
  focus: function(event, ui) {
        event.preventDefault();
         $('#ipt_Countryres').val(ui.item.label);
    }
  
});

<link href="http://api.jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>


<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>

Answer 3

You can reduce the minLength for getting more results:

$("#ipt_Countryres").autocomplete({
    source: country_list,
    minLength: 3,
    max:10,
    select: function (event, ui) {
        // Prevent value from being put in the input:
        $('#ipt_Countryres').val(ui.item.label);
        $('#get_country').val(ui.item.label);
        // Set the next input's value to the "value" of the item.
    }
});

Please find below the running code :

JS Fiddle : http://jsfiddle.net/vafus4qb/

Answer 4

Thank you so much for your suggestion.

Here is my final output which i get right now.

$("#ipt_Countryres").autocomplete({
highlightClass: "bold",
 source: function( request, response ) {

      var regex = new RegExp(request.term, 'i');

      //var filteredArray = filteredArray.slice(0,10);
    $.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:3,
select: function (event, ui) {
    $("#get_country").val(ui.item.label);
}

});

Thanks & Regards Mahadevan