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

Question

Я довольно новичок в 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"}]

Может кто-нибудь сказать мне, где я иду не так, пожалуйста? Начинаю разочаровываться. Поле ввода просто становится белым, и никакие параметры не отображаются. Код работает, если я указываю массив значений.

UPDATE Я изменил код на и все еще не везет.

$("#login_name").autocomplete({
    source: "/ajax/login_name.php",
    dataType: "json",
    minLength: 2,
    cache: false,
    select: function(event, ui) {
        alert(ui);
    }
});

При использовании инструмента веб-разработчика FireFox я получаю сообщение об ошибке "b is null".

Answer 1

Наконец-то нашел решение, которое соответствует моим потребностям

$("#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;
  }
});

Answer 2

некоторые предложения:

1. Почему dataType= "jsop"? Это не похоже на JSONP. Я думаю, что вы хотите "JSON".
2. также вставьте cache : false в опции. Это гарантирует, что запрос всегда выполняется и никогда не выполняется из кэша на стороне браузера.
3. проверь, идет ли звонок, с чем-то вроде Фиддлера или Чарльза.
4. Ваш успех вызван? У вас есть alert() там. Это вызывается?
5. если у вас есть Firebug или инструменты разработчика IE8, вы можете установить точку останова на alert(), чтобы проверить значение параметров.
6. Зачем указывать полное имя хоста в URL? Прошлой ночью у меня была странная ситуация с автозаполнением, когда ответ был пустым, пустой строкой, когда я использовал другое имя хоста для страницы и запрос Ajax. Когда я изменил его, чтобы использовать то же имя хоста, запрос был выполнен успешно. На самом деле из-за одной и той же политики происхождения у вас не должно быть никакого имени хоста в URL для вызова ajax.

Answer 3

На случай, если кому-то еще это нужно:

В документации по автозаполнению в пользовательском интерфейсе jQuery указан параметр строки запроса, который нужно использовать: « term », а не «q» ... или, по крайней мере, сейчас.

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor

Answer 4

Да, вам нужна информация заголовка для вашего 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");

и tvanfosson делает хороший упор на штекер

в любом случае, я не думаю,вы делаете вызов ajax, который делает плагин.

если вы заражены, используя jquery-ui autocomple , вам следует прочитать документацию, чтобы запустить базовую версию.Ваш php в порядке, кроме отсутствующих данных заголовка

Answer 5

Простое автозаполнение интерфейса 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>

Answer 6

У меня была такая же проблема, как и у вас. И теперь я это исправлю. Проблема в том, что мой json, возвращаемый с моего сервера, содержит синтаксическую ошибку.

В http://api.jquery.com/jQuery.getJSON/ говорит, что если в JSON есть какая-либо ошибка, она молча завершится неудачей. JSON должен соответствовать стандарту JSON здесь http://json.org/.

Из-за моей ошибки моя строка в JSON заключена только в одну кавычку. Но стандарт JSON допускает только строку, заключенную в двойные кавычки.

например. «Hello World», а не «Hello World»

Когда вы исправите это, вы можете установить источник в виде строкового URL. Термин будет в строке запроса «term». И это работает!

Answer 7

JSON strcuture является плоской строкой, в то время как map ожидает массив или массив, подобный структуре. попробуйте json decode на строку перед использованием map.