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 *脚本可以正常工作并返回数据，但我想显示< strong>多个现有关键字，就像在jQuery示例中一样：

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

但是，我无法弄清楚如何利用上面示例代码中的“函数（请求，响应）”从my * 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;
            }
        });
    });

具有来自数据库的多个值的jQuery UI自动完成

2 个答案: