自动完成的jQuery建议不起作用

Question

我正在使用jquery UI的自动完成组件。 虽然我的自动完成工作正常，但是如果我输入建议的字母“ I”，它将显示所有可从json数据中获得的列表，其中我仅需要相关字母即可，例如，如果输入字母“ Idia”，印度尼西亚等， 我只需要在列表中显示最多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

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

$.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 2

尝试这个：

 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

您可以减小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);
}

}）;

谢谢与问候马哈德万