jQuery Tokeninput 如果不存在则添加

Question

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

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

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

我发现这个外观很棒，并且非常漂亮。易于实现名为 TokenInput 的 jquery 插件，但它似乎不

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

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

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

而且我有点担心此类网站的安全方面，在进行此类实现时是否需要注意一些特殊的事情？

Answer 1

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

版本号和文档还没有两年更新一次，所以你必须使用master。

Answer 2

当您在字段上启用 tokenInput 时，

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

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

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

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"

Answer 3

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

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

    },
});

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

Answer 4

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

Answer 5

我还更改了 onBlur 函数，以便在用户单击搜索框时选择第一个项目 - 这对用户来说更直观：

.blur(function () {
        $(this).val("");
        if ($(".token-input-selected-dropdown-item").length>0)
            add_token($(".token-input-selected-dropdown-item").data("tokeninput"));
        hide_dropdown();
    })

Answer 6

 $(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 } ?>
            });

Answer 7

我在 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');
        }
    }
});

Answer 8

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

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"]));