Автозаполнение "Настройка", 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;
        }
    });
}

Источник "ajax-getAllMeds.php" создает допустимый JSON (как проверено http://www.jsonlint.com/).

Произведенный JSON

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

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

Answer 1

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

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

Подготовьте свой .php файл. В моем случае я назвал это "list.php" Моя таблица называется списками и имеет поля id и name. Я получаю только имя. Эти имена и будут заполнять выбираемые параметры.

Обратите внимание, что то, что пользователь вводит в поле ввода, передается как '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";
}

Подготовьте поле ввода. В моем случае я назвал это name = "myinputfield", но это не важно, потому что имя не имеет значения, значение имеет id = "searchterm"

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

Затем включите в файл .js следующее:

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

Я сделал несколько дополнительных вещей со стилем и т. Д., Потому что я не был доволен стилем по умолчанию, но это все, что вам нужно для работы функционала. Наиболее важными моментами являются использование $ _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;
        }
    });
}