我正在关注此线程中给出的JSFIDDLE,作为从一个简单的对象数组加载JQuery UI自动完成的方法:
http://jsfiddle.net/khsbme4k/
这里的过滤在这里破裂。有2个数据行,带有第一个_NAME字符串," will"one_answers" willem",但是如果您键入其他内容,例如" wa"您仍然可以得到2个项目的完整选择。
var data = [
{
"id": 1,
"first_name": "Will",
"last_name": "Smith",
"created_at": "2015-01-27T13:09:20.243Z",
"updated_at": "2015-01-27T13:09:20.243Z"
},
{
"id": 2,
"first_name": "Willem",
"last_name": "Dafoe",
"created_at": "2015-01-27T13:17:23.479Z",
"updated_at": "2015-01-27T13:17:23.479Z"
}
];
$('#search').autocomplete({
// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
minLength: 2,
source: function (request, response) {
response($.map(data, function (value, key) {
return {
label: value.first_name,
value: value.id
}
}));
},
focus: function(event, ui) {
$('#search').val(ui.item.first_name);
return false;
},
// Once a value in the drop down list is selected, do the following:
select: function(event, ui) {
// place the person.given_name value into the textfield called 'select_origin'...
$('#search').val(ui.item.first_name);
// and place the person.id into the hidden textfield called 'link_origin_id'.
$('#link_origin_id').val(ui.item.id);
return false;
}
考虑您的source
的以下代码示例:
source: function(request, response) {
var results;
var aData = $.map(data, function(value, key) {
return {
label: value.first_name,
value: value.id
}
});
results = $.ui.autocomplete.filter(aData, request.term);
response(results);
}
首先,我们将您的数据映射到AutoComplete期望的{ label, value }
对。然后,我们使用$.ui.autocomplete.filter()
执行预期的过滤,就像自动完成一样。这为我们提供了我们可以发送到response()
显示的结果数组。
工作示例:https://jsfiddle.net/twisty/svnbw2uj/3/
希望会有所帮助。
使用indexof((方法获取搜索项目的自动完成列表。
$(function() {
var data = [
{
"id": 1,
"first_name": "Will",
"last_name": "Smith",
"created_at": "2015-01-27T13:09:20.243Z",
"updated_at": "2015-01-27T13:09:20.243Z"
},
{
"id": 2,
"first_name": "Willem",
"last_name": "Dafoe",
"created_at": "2015-01-27T13:17:23.479Z",
"updated_at": "2015-01-27T13:17:23.479Z"
}
];
var auto_array = {};
$('#search').autocomplete({
// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
minLength: 2,
source: function (request, response) {
response($.map(data, function (value, key) {
//get the list of autocomplete start with search value. for case insensitive i used the toUpperCase() function.
var first_name = value.first_name.toUpperCase()
if(first_name.indexOf(request.term.toUpperCase()) != -1){
label = value.first_name;
auto_array[label] = value.id;
return label;
}else{
return null;
}
}));
},
select: function(event, ui) {
$('#link_origin_id').val(auto_array[ui.item.value]);
}
});
});
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<input type="text" id="search">
<input type="text" id="link_origin_id">