自動完成jQuery的建議不工作

Question

我正在從jQuery UI的自動完成組件。雖然我的自動完成工作正常，但如果我鍵入建議的字母「我」它顯示所有列表，這是可用的JSON數據，我只需要相關的信例如，如果我鍵入字母「印度」，印度尼西亞等。我只需要在列表中顯示最多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); 
} 

}）;

感謝&問候 馬哈德