jQuery Tokeninput如果不存在则添加

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

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

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

我发现这个看起来很棒且易于实现的jquery插件叫做TokenInput,但它似乎没有

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

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

这有解决方法吗? 或者你建议另一个已经具有此function的插件。

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

在字段上启用tokenInput时

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

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

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

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

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

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

这是我对本地json的解决方案

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

ID为0的所有内容都是新条目

要添加到Shawn的答案(即您需要某些服务器端实际将其添加为数据库中的新项),您可能能够进行此更改以允许在javascript方面添加内容。

我还改变了onBlur函数,如果他们点击搜索框就选择了第一个项目 – 它对用户更直观:

 .blur(function () { $(this).val(""); if ($(".token-input-selected-dropdown-item").length>0) add_token($(".token-input-selected-dropdown-item").data("tokeninput")); hide_dropdown(); }) 
  $(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, prePopulate:   }); 

我已经为SteveR的答案添加了一些function,因为即使有结果,我希望值显示在下拉列表的顶部。 如果所选项目在数据库中不存在,我想添加它:

  $("#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'); } } }); 

在.php文件中,在while条件之前,您可以使用:

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