Jquery ui автозаполнение с базой данных

Я новичок в JQuery и, возможно, пытаюсь достичь чего-то, что может стать более трудным для начинающего. Однако я пытаюсь создать автозаполнение, которое отправляет текущее значение в PHP script, а затем возвращает необходимые значения.

Вот мой код 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 Web Developer, я получаю сообщение об ошибке "b имеет значение null".

Ответы

Ответ 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;
  }
});

Ответ 2

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

Почему dataType= "jsop"? Это не похоже на jsonp. Я думаю, вы хотите "json".
вставьте cache : false в параметры. Это гарантирует, что запрос всегда выполняется и никогда не выполняется из кеша на стороне браузера.
проверьте, идет ли звонок, что-то вроде Fiddler или Charles.
Получается ли ваш успех fn? У вас там alert(). Вызывается ли это?
Если у вас есть инструменты для Firebug или IE8, вы можете установить точку останова на alert(), чтобы проверить значение параметров.
Зачем указывать полное имя хоста в URL? Вчера вечером у меня была странная ситуация с автозаполнением, где ответ был пустым, пустая строка, когда я использовал другое имя хоста для страницы и запрос Ajax. Когда я изменил его, чтобы использовать одно и то же имя хоста, запрос выполнился. Фактически из-за той же политики происхождения, у вас не должно быть никакого имени хоста в URL-адресе для вызова ajax.

Ответ 3

Да, вам нужна информация заголовка для вашего 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, который делает плагин.

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

Ответ 4

Если кому-то еще это нужно:

Документация для автозаполнения в пользовательском интерфейсе jQuery указывает, что параметр querystring для использования - термин ', а не' q '... или, по крайней мере, сейчас.

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

Ответ 5

Простой Jquery ui автозаполнение, для тех, кому это может понадобиться.

//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>

Ответ 6

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

Ответ 7

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

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

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

например. "Hello World" не "Hello World"

Когда вы исправляете это, вы можете установить источник как строковый URL. Этот термин будет в строке запроса "term". И это работает!