19

我正在编写一个基于用户输入的脚本，

我有一些字段需要从数据库中查询其值，

如果没有找到条目，我想添加一个新值，以便下一个用户可以通过自动完成找到它。

我发现这个名为 TokenInput 的漂亮且易于实现的 jquery 插件，但它似乎没有

接受在我的数据库查询中不可用的条目。

这是插件的链接：http: //loopj.com/jquery-tokeninput/demo.html

有解决方法吗？或者您是否建议另一个已经具有此功能的插件。

而且我有点担心这类网站的安全方面，在进行这种实施时我需要注意什么特别的事情吗？

4

8 回答 8

17

这现在在这个插件的最新主控中处理，使用 allowFreeTagging 选项：https ://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

版本号和文档已经两年没有更新了，所以你必须使用master。

于 2013-03-28T16:01:17.270 回答
13

在字段上启用 tokenInput 时，

$(selector).tokenInput(url, ...

该 url 是 tokenInput 发送搜索查询的地方。它指向一个脚本，该脚本根据与搜索查询匹配的数据库条目返回建议。当您的数据库中没有任何内容与搜索查询匹配时，您想要让该脚本在该案例的列表中添加另一个建议。如何做到这一点在很大程度上取决于脚本。

因为您用 标记了您的问题php，所以我猜测 url 指向一个 php 脚本，该脚本返回一个充满建议的 JSON 对象。在这种情况下，修改 php 脚本，以便将新建议添加到列表中：

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"
于 2011-11-19T20:12:53.723 回答
10

这是我使用本地 json 的解决方案

$("#input").tokenInput(yourjsondata,{
    preventDuplicates: false,
    onResult: function (item) {
        if($.isEmptyObject(item)){
              return [{id:'0',name: $("tester").text()}]
        }else{
              return item
        }

    },
});

id:0 的所有内容都是新条目

于 2013-03-03T16:39:02.287 回答
2

要添加到 Shawn 的答案（即您需要服务器端的东西才能将其作为新项目实际添加到数据库中），您可以进行此更改以允许在 javascript 方面添加。

于 2011-11-20T08:16:38.893 回答
1 
 $(document).ready(function() {
            $("#expert").tokenInput("source.php", {
                theme: "facebook",
                noResultsText:'Skill Not Found - Enter to Add',
                queryParam:'q',
                onResult: function (item) {
                                            if($.isEmptyObject(item)){
                                                  return [{id:$("#token-input-expert").val(),name: $("#token-input-expert").val()+'*'}]
                                            }else{
                                                  return item
                                            }
                },
                preventDuplicates:true<?php if($expert_rank_json){?>,
                prePopulate: <?php echo $expert_rank_json ?>
                <?php } ?>
            });
于 2014-04-14T21:20:06.210 回答
1

我还更改了 onBlur 函数以选择第一个项目，如果他们点击搜索框 - 它对用户来说更直观：

.blur(function () {
        $(this).val("");
        if ($(".token-input-selected-dropdown-item").length>0)
            add_token($(".token-input-selected-dropdown-item").data("tokeninput"));
        hide_dropdown();
    })
于 2012-02-22T09:59:59.633 回答
0

我在 SteveR 的答案中添加了一些功能，因为即使有结果，我也希望该值出现在下拉列表的顶部。如果我想添加的数据库中不存在所选项目，也可以添加：

 $("#my_input").tokenInput(my_results_route), {
    hintText: "Select labels",
    noResultsText: "No results",
    searchingText: "Searching...",
    preventDuplicates: true,
    onResult: function(item) {
        if($.isEmptyObject(item)){
            return [{id:'0', name: $("tester").text()}];   
        } else {
            //add the item at the top of the dropdown
            item.unshift({id:'0', name: $("tester").text()});
            return item; 
        }
    },
    onAdd: function(item) {
        //add the new label into the database
        if(!parseInt(item.id)) {
            //database insertion ajax call
            console.log('Add to database');
        }
    }
});
于 2013-11-14T11:11:12.497 回答
0

在 .php 文件中，在 while 条件之前，您可以使用：

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"]));
于 2013-03-06T11:34:41.413 回答