javascript - 自动完成 jquery 建议不起作用

Question

我正在研究来自 jquery UI 的自动完成组件。虽然我的自动完成工作正常，但如果我输入建议的字母“I”，它会显示所有可从 json 数据获得的列表，其中我只需要相关的字母，例如，如果我输入字母 I“印度”、印度尼西亚等。我只需要在列表中显示最多 10 个值。在这里我更新了最新的代码我正在尝试在自动完成中进行切片并且我正在尝试在下一个文本框中获取相同的值。

这是当前的jquery代码

$("#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);               
       }
    });
}

});

这是HTML代码

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

这是我的示例 JSON 数据

[  
   {  
    "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"

}]

请帮助我。

提前致谢

马哈德万

Answer 1

试试这个:

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>