JQuery UI Автозаполнение с несколькими значениями из базы данных

Question

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

    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });
    });
    

РЕДАКТИРОВАТЬ: Я использую код ниже на других страницах, чтобы успешно генерировать отдельные ключевые слова из моей базы данных, поэтому я знаю, что скрипт * generate_keywords.php * работает и возвращает данные, но я хотел бы отобразить несколько существующих ключевых слов, как в примере с jQuery:

   $("#text-keywords").autocomplete({
        source: "generate_keywords.php",
        minLength: 2,
        select: function(event, ui) {
            $('#text-keywords').val(ui.item.label);
        }
    });

Однако я не могу понять, как использовать «функцию (запрос, ответ)» из приведенного выше примера кода, чтобы вернуть данные из моего сценария * generate_keywords.php *. Я поиграл с использованием функции ajax (), но мне не повезло.

Спасибо!

Answer 1

http://jqueryui.com/demos/autocomplete/#multiple-remote

Проверьте ссылку выше. В основном вы должны вызывать ваш сервер через "getJSON"

        .autocomplete({
            //blah-blah-blah
            source: function( request, response ) {
                $.getJSON( "search.php", {
                    term: extractLast( request.term )
                }, response );
            },
            //blah-blah-blah

Answer 2

    $(function() {
        function split(val) {
            return val.split(/,\s*/);
        }

        function extractLast(term) {
            return split(term).pop();
        }
        $("#states_names").autocomplete({
            minLength: 4,
            source: function(request, response) {

                $.ajax({
//receives json array answer from the url
                    url: "search/state",
                    data: {
                        term: extractLast(request.term)
                    },
                    dataType: "json",
                    type: "POST",
                    success: function(data) {
                        response(data);
                    },
                    error: function() {
                        // added an error handler for the sake of the example
                        response($.ui.autocomplete.filter(
                            ["opt1","opt2"]
                            , extractLast(request.term)));
                    }
                });
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function(event, ui) {
                var terms = split(this.value);

                // remove the current input
                terms.pop();

                // add the selected item
                terms.push(ui.item.value);

                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(",");
                return false;
            }
        });
    });