Question

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

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

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

我发现这个很棒的＆amp;容易实现名为TokenInput的jquery插件，但它似乎没有

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

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

有解决方法吗？或者你建议另一个已经有这个功能的插件。

我有点担心这类网站的安全方面是否有一些我需要在进行此类实施时需要注意的事项？

Answer 1

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

版本号和文档在2年内未更新，因此您必须使用master。

Answer 2

在字段上启用tokenInput时，

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

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

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

"{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的答案（即您需要服务器端实际将其添加为数据库中的新项目），您可以使this change允许在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

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

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

Answer 8

我已经为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');
        }
    }
});

jQuery Tokeninput如果不存在则添加

8 个答案: