JQuery UI автозаполнение базы данных

Question

Я хотел бы использовать автозаполнение пользовательского интерфейса jQuery для загрузки списка из моей базы данных, но я не знаю, какой метод мне следует использовать для этого.

Я пытался использовать метод «Удаленный источник данных» http://jqueryui.com/demos/autocomplete/#remote,, но он явно не работает.

У меня есть следующий код:

ЯШ:

$(function() {
    $("#client").autocomplete({
    source: "nom.php",
    minLength: 2,
        select: function(event, ui) {
        alert(ui);
        }
    });
});

html:

<label for="client">Client</label>
<input name="client" id="client" class="ui-autocomplete ui-widget-content ui-corner-all" />

PHP:

$query = "SELECT nom from personne";
$result = mysql_query($query, $db);

while($row = mysql_fetch_assoc($result)) {

foreach($row as $val)
    $tab[] = $val;

}

print json_encode($tab);

Он показывает все значения независимо от того, что я ввожу, но когда я копирую результат nom.php и вставляю его рядом с источником: он работает ...

спасибо за ваш шлем

Answer 1

Проблема в том, что вы не фильтруете сервер результатов.

Когда вы используете локальную коллекцию, локальная коллекция автоматически фильтруется автозаполнением.

Однако при использовании удаленного источника источник должен фильтроваться. Я предполагаю, что это экономит полосу пропускания, чтобы сервер отправлял только совпадающие элементы, а не все элементы, и позволял браузеру фильтровать в его конце.

При вызове метода на стороне сервера автозаполнение также отправляет параметр с именем term, который можно использовать для фильтрации.

Вы можете получить введенное значение в своем php-скрипте следующим образом:

 $term = trim(strip_tags($_GET['term']));

Затем в вашей foreach добавьте только элементы, соответствующие фильтру, в свою коллекцию, прежде чем отправлять ее снова.