У меня есть простая функция автозаполнения jquery, которая возвращает Json из службы, и я хочу показать возвращенные результаты с автозаполнением, но ничего не происходит. На самом деле не знаю, как это исправить, хотя кажется простым
<body>
<label for="txtSearch">Select a programming language: </label>
<input id="txtSearch"/>
<div id="results"></div>
<script>
$(document).ready(function(){
$("#txtSearch").autocomplete({
source: rez,
appendTo: "#results"
});
});
var rez = function search2() {
if ($("#txtSearch").val().length > 2) {
$.ajax({
type: "post",
url: "Search.aspx/GetCity",
data: "{'cityName':'" + $("#txtSearch").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var obj = $.parseJSON(result.d);
return obj;
}
});
}
};
</script>
jQuery обрабатывает JSON-синтаксический анализ для вас. Нет необходимости отправлять его в виде строки или анализировать результат после этого, если ваш dataType "json".
Конкретная проблема заключается в том, что ваша функция rez
не имеет необходимых аргументов, переданных ей, request
и response
. request
- это объект, который имеет свойства, относящиеся к поисковому запросу, например. request.term
. response
- это функция обратного вызова, которую нужно вызвать внутри $.ajax
успеха $.ajax
чтобы передать данные обратно на автозаполнение.
Вам все еще нужно было проанализировать данные, которые вы возвращали с сервера, поскольку, поскольку автозаполнение ожидает либо простой массив значений, либо массив объектов, содержащих label
и value
ключей, например:
[
{ label: 'London, England', value: 'LDN' },
{ label: 'Liverpool England', value: 'LPL' }
]
Используйте console.log()
чтобы посмотреть на значения, которые вы получаете, и сделать их тем, что вы ожидаете/нуждаетесь.
В документации есть пример, который вы можете найти здесь: http://jqueryui.com/autocomplete/#remote-jsonp
Попробуй это:
$(document).ready(function(){
$("#txtSearch").autocomplete({
source: rez,
appendTo: "#results",
minLength: 2 // this will check the input is at least 2
});
});
// request is the search request object,
// response is the callback to pass data back to autocomplete
var rez = function search2( request, response ) {
$.ajax({
type: "post",
url: "Search.aspx/GetCity",
data: { cityName: request.term },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// results have to be returned via the response callback as
// label/value pairs or just an array of values
response( $.map( result, function( item ) {
return {
label: [ item.CityName, item.Country, item.Region].join( ', ' ),
value: item.ID
};
} ) );
}
});
};
попробуй что-нибудь вроде этого
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.CityName,
value: item.ID
}
}));
}
СПРАВКА
obj
и показать результат. это может не понадобиться.