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

Question

我正在尝试修改在http://jqueryui.com/demos/autocomplete/#multiple 找到的代码以使用从我的数据库生成的数据，而不是使用列表中的数据

$（函数（）{ var 可用标签 = [ "动作脚本", “苹果脚本”， “阿斯普”， “基本的”， “C”， "C++", “克洛朱尔”， "COBOL", “冷融合”， “二郎”， “Fortran”， “时髦”， “哈斯克尔”， “爪哇”， "JavaScript", “口齿不清”， “珀尔”， "PHP", “Python”， “红宝石”， “斯卡拉”， “方案” ]; 函数拆分（val）{ 返回 val.split(/,\s*/); } 函数提取最后（术语）{ 返回拆分（术语）.pop（）； } $( "#tags" ) // 选择项目时不要离开选项卡上的字段 .bind（“keydown”，函数（事件）{ if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "自动完成" ).menu.active ) { event.preventDefault(); } }) .自动完成（{ 最小长度：0， 来源：功能（请求，响应）{ // 委托回自动完成，但提取最后一项 响应（$.ui.autocomplete.filter（ availableTags, extractLast(request.term))); }, 焦点：函数（）{ // 防止在焦点上插入值 返回假； }, 选择：函数（事件，用户界面）{ var terms = split(this.value); // 移除当前输入 条款.pop(); // 添加选中的项目 条款.push(ui.item.value); // 添加占位符以获取末尾的逗号和空格 条款.push(""); this.value = terms.join(", "); 返回假； } }); });

编辑：我在其他页面上使用下面的代码成功地从我的数据库生成单个关键字，所以我知道 *generate_keywords.php* 脚本可以工作并返回数据，但我想显示 多个 现有的关键字，就像在 jQuery 示例中一样：

 $("#text-keywords").autocomplete({
        来源：“generate_keywords.php”，
        最小长度：2，
        选择：函数（事件，用户界面）{
            $('#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;
            }
        });
    });