Autocomplete «setup», jquery

Question

Я пытаюсь получить автоматическое завершение работы с простым приложением, которое я создаю. Вот мой код до сих пор:

 
gMeds = new Array(); 

$(document).ready(function(){ 
    var autoComp = setUpAutoComplete(); 
    if(autoComp) { 
     $("#med").autocomplete(gMeds); 
    } 
    else { 
     alert('Autocomplete unavailable'); 
    } 

}); 

function setUpAutoComplete() { 
    $.ajax({ 
     url: "ajax-getAllMeds.php", 
     async: false, 
     type: "GET", 
     dataType: "text", 
     success: function(result){ 
      gMeds = JSON.parse(result); 
      return true; 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
      return false; 
     } 
    }); 
} 

Источник «АЯКС-getAllMeds.php» производит действительный JSON (как проверяется http://www.jsonlint.com/).

JSON производства является

 
{ 
    "meds": [ 
     { 
      "name": "ace" 
     }, 
     { 
      "name": "danger" 
     } 
    ] 
} 

То, что я пытаюсь выполнить поворот мой JSON в яваскрипта массив, а затем использовать этот массив в качестве основы для моего пула слов к «Автозаполнение из». Я в отъезде? Я сталкиваюсь с различными проблемами.

Answer 1

У меня была такая же проблема с JQuery автозаполнения пару дней назад к тому, что я считал с помощью Scriptaculous автозаполнения, но это оказалось намного проще, чем я думал, что на самом деле - вид удивлен всем, что тянет волосы, я прошел через :)

Как оказалось, это все, что вам нужно, серьезно .. если вы столкнетесь с проблемами, вернитесь ко мне, и я постараюсь разобраться с вами.

Получить ваш .php-файл готов. В моем случае я назвал его «list.php» Моя таблица называется списками и имеет имена и имена полей. Я получаю только имя. Эти имена собираются заполнить выбранные параметры.

Обратите внимание, что то, что пользователь вводит в поле ввода, передается как «q». Это $ _GET ['q'], который вы видите в строке 2 нижеприведенного кода. Вы можете переопределить/переименовать его, если хотите, но лучше не беспокоиться. Обратите внимание, что это также не имеет никакого отношения к имени самого поля ввода.

Обратите внимание также, что для автозаполнения jquery требуется «\ n», чтобы отделить результаты от независимых параметров. Если вы не конкатенируете «\ n», он выведет все как одну выбираемую опцию.

//start with database connection of course 
$rs = mysql_query("SELECT * FROM lists WHERE name LIKE '%" . $_GET['q'] . "%'"); 


while($row = mysql_fetch_assoc($rs)) { 
    echo $row['name'] . "\n"; 
} 

Получить поле ввода готово. В моем случае, я назвал это имя = «myinputfield», но это не важно, потому что имя не имеет значения, это ид = «SEARCHTERM», что имеет значение

<input name="myinputfield" type="text" id="searchterm" size="30" maxlength="100" /> 

Тогда в файле .js, включают в себя следующие :

$("#searchterm").autocomplete("list.php"); 

Я сделал некоторые дополнительные вещи с моделированием и т.д., потому что я не был доволен стилем по умолчанию, но это все, что вам нужно, чтобы получить functionalirty собирается. Наиболее важные моменты - использовать $ _GET ['q'] в вашем скрипте и указать идентификатор #searchterm в js.

Дайте мне знать, если это решит вашу проблему.

Answer 2

Первое, что вы должны попробовать это:

gMeds = JSON.parse(result).meds; 

Вы также должны переместить код в метод успеха.

$(document).ready(function(){ 
    setUpAutoComplete(); 
}); 

function setUpAutoComplete() { 
    $.ajax({ 
     url: "ajax-getAllMeds.php", 
     async: false, 
     type: "GET", 
     dataType: "text", 
     success: function(result){ 
      var json = JSON.parse(result); 
       if (!json || !json.meds) { 
        alert('invalid'); 
       } 
       $("#med").autocomplete(json.meds); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
      return false; 
     } 
    }); 
}