搜索不工作在jquery自動完成

Question

我正在使用JQuery自動完成。數據源是動態的。用字符搜索（例如：alex）時，它會返回所有數據。我的代碼，

$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: apiurl + "apiv2/getUsers", 
 
     data: { 
 
     cust_id: localStorage.getItem("cust_id"), 
 
     user_type: $("#to_role").val() 
 
     }, 
 
     success: function(data1) { 
 
     var parsedJson = $.parseJSON(data1); 
 
     response($.map(parsedJson.response.data, function(item) { 
 
      return { 
 
      label: item.name, 
 
      value: item.id 
 
      } 
 
     })); 
 
     } 
 
    }); 
 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
}); 
 
$('#autocomplete').on('autocompleteselect', function(e, ui) { 
 
    getUsersData(ui.item.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

我必須展示我所搜索的確切數據。如何解決這個問題？請幫幫我。

在此先感謝

Answer 1

如果您的API服務器沒有過濾選項，那麼你需要在本地實現它

if (!RegExp.escape) { 
 
    RegExp.escape = function(value) { 
 
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") 
 
    }; 
 
} 
 

 
//to mock the ajax response 
 
var parsedJson = { 
 
    response: { 
 
    data: [{ 
 
     id: 1, 
 
     name: 'Abc' 
 
    }, { 
 
     id: 2, 
 
     name: 'cde' 
 
    }, { 
 
     id: 3, 
 
     name: 'efg' 
 
    }, { 
 
     id: 4, 
 
     name: 'ghi' 
 
    }, { 
 
     id: 5, 
 
     name: 'jkl' 
 
    }, { 
 
     id: 6, 
 
     name: 'aFZ' 
 
    }] 
 
    } 
 
} 
 

 
$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 

 
    //replace the contents of the ajax success handler to do local filter 
 
    var regex = new RegExp(RegExp.escape(request.term), "i"); 
 
    var recs = $.grep(parsedJson.response.data, function(obj) { 
 
     return regex.test(obj.name) 
 
    }); 
 
    response($.map(recs, function(item) { 
 
     return { 
 
     label: item.name, 
 
     value: item.id 
 
     } 
 
    })); 
 

 

 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
});

<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

注：這可能是一個昂貴的執行情況您正在獲取每個事件的所有內容，您可以嘗試在本地緩存本地響應的ajax響應以提高性能