Простое автозаполнение JQuery с обратным вызовом Javascript для форматирования ответа
Я новичок в JSON и пытаюсь выяснить, как заставить это действительно простое автозаполнение работать с некоторым форматированным ответом. (все автозаполнения jquery, которые я вижу, используют огромную библиотеку пользовательского интерфейса, от которой я бы предпочел держаться подальше).
Это то, что я до сих пор:
$(function() {
// u check
$('#search-input').keyup(function() {
$.ajax({
dataType: 'jsonp',
type: "POST",
url: "/includes/myautocomplete/tags.php",
data: "callback=autocomplete&q="+$('#search-input').val(),
jsonp: 'autocomplete',
success: function(json){
$('#search-resp').html(json);
}
});
});
});
Я пытаюсь отформатировать ответ с помощью:
function autocomplete(json) {
var html ='<ul>';
for(i=0;i<json.length;i++) {
var n = json[i];
html = '<li>'+n['tagname']+'</li>';
}
html = '</ul>';
return html;
}
Мой PHP выглядит так:
# JSON-encode the response
$json_response = json_encode($array);
# Optionally: Wrap the response in a callback function for JSONP cross-domain support
if($_POST["callback"]) {
$json_response = $_POST["callback"] . "(" . $json_response . ")";
}
# Return the response
echo $json_response;
Что я делаю неправильно? Заранее спасибо.
3 ответа
Я считаю, что вам нужно сначала проанализировать JSON:
success: function(data){
var json = $.parseJSON(data);
//then display it...
}
Простое текстовое поле автозаполнения
Просто включите библиотеку JS в <head>
:
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
В <body>
тег:
<input type="text" name="testne" id="testneer" onkeypress="IP_autoComplete('http://services.iperfect.net/ajax/countries.php?name=',this.id,'testDiv',event,'')">
<div id='testDiv'></div>
Для начала вы никогда не вызываете функцию форматирования
У тебя есть:
success: function(json){
$('#search-resp').html(json);
}
который пытается вставить объект полного ответа в элемент в виде HTML.
Предполагая ваш autocomplete
Функция правильно анализирует возвращенный массив или объект, ваш код должен выглядеть так:
success: function(json){
var jsonFormattedToHtml=autocomplete(json)
$('#search-resp').html(jsonFormattedToHtml);
}
РЕДАКТИРОВАТЬ
Ваш HTML-код fomatting имеет несколько недостатков.
Самое большое, что вам нужно объединить html
используя html +=
вместо html=
после того, как вы впервые определите это. С помощью =
только стирает любое ранее установленное значение, поэтому вывод вашей функции будет просто закрытием </ul>
только.
Также свойства объекта в форматере не соответствуют показанным данным.
Вот рабочая демка