Question

我正在使用jQuery插件Tag-it来自动填写表单输入字段中的标记。该插件加载存储在数组中的可用标记。

$("#mytags").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});

我从插件的javascript代码中复制了以下函数，我相信它是加载标记的主要功能：

tag_input.autocomplete({
            source: options.availableTags, 
            select: function(event,ui){
                if (is_new (ui.item.value)) {
                    create_choice (ui.item.value);
                }
                // Cleaning the input.
                tag_input.val("");

                // Preventing the tag input to be update with the chosen value.
                return false;
            }
        });

该插件工作正常并自动完成availableTags数组中的标记，但我想对其进行一些小改动。我想从mySQL数据库表中加载标签，而不是从数组中加载标签。该表具有以下结构：

标记：

tag_id      tag_name
1            c++
2            java
3            php
4            javascript
5            ruby

那么如何从数据库中自动加载标签名称（使用PHP）而不是从上面的数组加载？感谢。

Answer 1

此插件似乎基于jQuery UI Autocomplete，因此代码中的source参数可以是数组，字符串或回调。请参阅

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

以获取适当的文档。基本上，您可以在服务脚本中添加一个带有url的字符串，该脚本解析插件分配的$_GET['term']并返回一个标记数组。

Answer 2

您可以使用PHP动态构建 -

$("#mytags").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});

JavaScript代码。这个blog entry包含的函数大致应该是您所需要的。

Answer 3

查看使用remote datasource的示例。 source参数是执行MySQL查询并返回数据的php脚本的名称。

Answer 4

是的，你可以喜欢：

而不是

source: options.availableTags

使用它：

source: function(request, response) {
    var term = request.term // This will hold the text you typed in autocomplete
    $.get(url, data, function(data){
        // Build an array to return
        var dataToReturn = [];
    });
    response(dataToReturn);
}

Answer 5

我用以下代码解决了同样的问题：

$('#tags').tagit({
    tagSource: function(request, response) {
        var term = request.term;
        $.get("/suggestTags?term=" + term, function(data){
            var dataToReturn = data;
            response(dataToReturn); 
        });
    }
});

从数据库而不是数组加载数据

5 个答案: