Я попытался получить поиск только для возврата результатов, соответствующих тому, что вводит пользователь в поле поиска, но мое решение возвращает ВСЕ результаты ВСЕГО. На самом деле это не так полезно. У моего JSON есть идентификатор и имя, поэтому он выглядит примерно так:
[{"id":"48de475e-cbf2-4264-a482-02cbe9dbcbfb","name":"[email protected] for Username: sampleuser"}]
Javascript/jQuery ниже - это простой вызов ajax для моего контроллера, который возвращает JsonResult через HTTP GET. Я сопоставляю возвращаемые данные и отображаю их в элементе управления автозаполнением. Я не уверен, почему функция поиска не вернет подмножество данных.
function getEmailAddresses() {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$('#autocompleteEmailAddresses')
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB) {
event.preventDefault();
}
})
.autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/GetEmailAddresses",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: true,
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.name,
value: item.id
}
}));
}
});
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
log(ui.item ?
"Selected id: " + ui.item.value :
"Nothing selected, input was " + this.value);
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
},
minLength: 2,
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
};
Вот моя разметка
<div>
<input type="text" id="autocompleteEmailAddresses" class="form-control item" placeholder="Enter an Email address" />
</div>
<div style="margin-top:2em; font-family:Arial">
<div id="log" style="overflow: auto;"></div>
</div>
Измените свой.autocomplete на следующие...
.autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/GetEmailAddresses?term=" + extractLast(request.term),
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: true,
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},