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

Posted 2023-05-08

【中文标题】具有来自数据库的多个值的 jQuery UI 自动完成

【英文标题】：jQuery UI Autocomplete with Multiple Values from Database

【发布时间】：2011-06-23 04:10:01

【问题描述】：

我正在尝试修改在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() 函数，但我没有任何运气。

谢谢！

【问题讨论】：

generate_keywords.php 是否正确响应？它的反应是什么？

是的，generate_keywords.php 给出以下 JSON 输出：["id":"48","label":"COMP_DATABASES","id":"37","label ":"COMP_GAMES","id":"15","label":"COMP_GENERAL","id":"34","label":"COMP_HARDWARE","id":"31 ","label":"COMP_LINUX","id":"36","label":"COMP_NETWORKING","id":"55","label":"COMP_PALM","id ":"14","label":"COMP_SECURITY","id":"33","label":"COMP_SOFTWARE"]

你的意思是你想要类似的东西：COMP_DATABASES、COMP_HARDWARE、COMP_SOFTWARE 等。用“，”分隔的多个项目的排序

【参考方案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

【讨论】：

如何限制重复的远程值？

【参考方案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;
            
        );
    );