автозаполнение пользовательского интерфейса jquery с помощью базы данных
Я довольно новичок в jQuery и, возможно, пытаюсь достичь чего-то, что может быть немного сложнее для новичка. Однако я пытаюсь создать автозаполнение, которое отправляет текущее значение в PHP-скрипт, а затем возвращает необходимые значения.
Вот мой код Javascript
$("#login_name").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://www.myhost.com/myscript.php",
dataType: "jsonp",
success: function(data) {
alert(data);
response($.map(data, function(item) {
return {
label: item.user_login_name,
value: item.user_id
}
}))
}
})
},
minLength: 2
});
А вот и последняя половина"myscript.php "
while($row = $Database->fetch(MYSQLI_ASSOC))
{
foreach($row as $column=>$val)
{
$results[$i][$column] = $val;
}
$i++;
}
print json_encode($results);
, который выдает следующий результат
[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]
Кто-нибудь может сказать мне, где я ошибаюсь, пожалуйста? Начинаю становиться совсем несостоявшийся. Поле ввода просто становится "белым", и никакие параметры не отображаются. Код действительно работает, если я указываю массив значений.
ОБНОВЛЕНИЕ Я изменил код на и по-прежнему не везет.
$("#login_name").autocomplete({
source: "/ajax/login_name.php",
dataType: "json",
minLength: 2,
cache: false,
select: function(event, ui) {
alert(ui);
}
});
Используя инструмент веб-разработчика FireFox, я получаю сообщение об ошибке "b равно нулю".
7 answers
Наконец-то нашел решение, которое соответствует моим потребностям
$("#login_name").autocomplete({
source: function(request, response){
$.post("/ajax/login_name.php", {data:request.term}, function(data){
response($.map(data, function(item) {
return {
label: item.user_login_name,
value: item.user_id
}
}))
}, "json");
},
minLength: 2,
dataType: "json",
cache: false,
focus: function(event, ui) {
return false;
},
select: function(event, ui) {
this.value = ui.item.label;
/* Do something with user_id */
return false;
}
});
Некоторые предложения:
- Почему
dataType= "jsop"? Похоже, это не jsonp. Я думаю, вы хотите "json". - также вставьте
cache : falseв параметры. Это гарантирует, что запрос всегда выполняется и никогда не выполняется из кэша на стороне браузера. - проверьте, идет ли вызов, с помощью чего-нибудь вроде Скрипача или Чарльза.
- называется ли ваш успех fn? У вас есть
alert()там. Вызывается ли он? - если у вас есть Firebug или инструменты разработчика IE8, вы можете поместить точка останова на
alert()для проверки значения параметров. - Зачем указывать полное имя хоста в URL-адресе? Прошлой ночью у меня была странная ситуация с автозаполнением, когда ответ был нулевым, пустой строкой, когда я использовал другое имя хоста для страницы и запроса Ajax. Когда я изменил его, чтобы использовать то же имя хоста, запрос был выполнен успешно. На самом деле из-за той же политики происхождения у вас вообще не должно быть имени хоста в URL-адресе для вызова ajax.
Да, вам действительно нужна информация о заголовке для вашего json
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
И тванфоссон делает хорошую точку опоры на вилку
В любом случае я не думаю, что вы делаете вызов ajax, который делает плагин.
Если вы используете автокомплемент jquery-ui, вам следует прочитать документацию, чтобы запустить базовую версию. ваш php в порядке, если не считать отсутствующих данных заголовка
На случай, если это кому-то еще понадобится:
Документация для автозаполнения в пользовательском интерфейсе jQuery указывает, что параметр строки запроса для использования является "термин", а не "q"... или, по крайней мере, сейчас.
E.g. http://www.myhost.com/myscript.php?term=someToSearchFor
Простое автозаполнение пользовательского интерфейса Jquery для тех, кому это может понадобиться.
//select data from the table
$search = $db->query('SELECT Title from torrents');
//then echo script tags and variables with php
<?php echo '<script type="text/javascript">
$(function() {
var availableTags = [';
foreach ($search as $k) {
echo '"'.$k['Title'].'",';
}
echo '];
$( "#tags" ).autocomplete({
minLength:2, //fires after typing two characters
source: availableTags
});
});
</script>';
?>
Ваша html-форма
<div id="search">
<form id="search-form">
<input id="tags" type="text" />
<input type="submit" value="Search" />
</form>
</div>
Структура JSON представляет собой плоскую строку, в то время как отображение ожидает массив или структуру, подобную массиву. попробуйте расшифровать строку в формате json перед использованием map.
У меня тоже была проблема, как и у тебя. И теперь я это исправляю. Проблема в том, что мой json, возвращаемый с моего сервера, содержит синтаксическую ошибку.
В http://api.jquery.com/jQuery.getJSON / сообщает, что если в JSON есть какая-то ошибка, она завершится беззвучно. JSON должен соответствовать стандарту JSON здесь http://json.org/ .
Поскольку моя ошибка заключается в том, что моя строка в JSON заключена только в одну кавычку. Но стандарт JSON принимает только строки, заключенные в двойные кавычки.
Например. "Привет, мир", а не "Привет, мир"
Когда вы это исправите, вы можете установить источник в качестве строкового URL-адреса. Термин будет находиться в строке запроса "термин". И это работает!!