自动完成 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>

Answer 2

尝试添加以下代码以过滤以正则表达式开头的值，

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

查看更多jqueryui-autocomplete-filter-words-starting-with-term

Answer 3

您可以减少 minLength 以获得更多结果：

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

请在下面找到运行代码：

JS 小提琴：http://jsfiddle.net/vafus4qb/

Answer 4

非常感谢您的建议。

这是我现在得到的最终输出。

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

});

感谢和问候 马哈迪文