始終顯示自動完成列表，即使搜索不匹配

Question

我有一個自動完成字段，在類型上，我轉到PHP /數據庫以檢索匹配的選項。

問題是，我的建議列表與文本不完全匹配。 我解釋：

假設我輸入“ Jon”。 我的列表將從數據庫“ John Doe”，“ Jonatan”等中獲取。只有“ Jonatan”作為輸入的建議可見，但我確實需要它們，因為它考慮了近似值（我的設備上有一個soundex元素。后端搜索）。

我的JavaScript / Ajax代碼：

 function prePatientsList(){ //I'm limiting search so it only starts on the second character if (document.getElementById("name").value.length >= 2) { try { listExecute.abort(); }catch(err) { null; } var nome= $("#name").val(); var nomeList = ""; listExecute = $.ajax({ url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete', type: "POST", async: true, datatype: 'json', data: { nome: nome} }).done(function(data){ source = JSON.parse(data); }); $(function() { $("input#nome").autocomplete({ source: source, // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both. select: function( event, ui ) { ui.item.label; } }); }); } } 

謝謝。

Answer 1

我認為您必須將遠程端點直接設置為自動完成的源（例如，類似於https://jqueryui.com/autocomplete/#remote ），以便它是進行所有篩選的后端。 現在，自動完成功能有效地認為您已向其提供了一個靜態選項列表，應從中進行進一步的過濾，因此，它決定自行處理過濾。

我認為您的代碼可以像這樣簡單，無需在自動完成功能范圍之外擁有單獨的處理程序或ajax請求。

$(function() {
  $("input#nome").autocomplete({
    minLength: 2, //limit to only firing when 2 characters or more are typed
    source: function(request, response) 
    {
      $.ajax({
        url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
        type: "POST",
        dataType: 'json',
        data: { nome: request.term } //request.term represents the value typed by the user, as detected by the autocomplete plugin
     }).done(function(data){
         response(data); //return the data to the autocomplete as the final list of suggestions
     });
    },
    // I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
    select: function( event, ui ) {                     
      ui.item.label;
    }
  });
});

有關更多信息，請參見http://api.jqueryui.com/autocomplete/#option-source 。