Twitter Bootstrap 3的Typeahead/Tagsinput自动完成两次

Question

编辑：已添加可用的JSFiddle

我正在使用Twitter Bootstrap TagsInput与Bootstrap Typeahead。我的数据源是JSON文件，但这并不重要，我已经使用静态源进行了检查。

Typeahead和tagsinput正在工作，但当我按下Enter键、Tab键或单击标签时，它会创建一个完整的重复。

每当我按下Enter键或完成Typeahead时，都会发生额外的“default”。如果我通过逗号分隔或将焦点从窗口中移开来打破Typeahead，则不会发生这种情况。

以下是输入：

<input id="itemCategory" type="text" autocomplete="off" class="tagsInput form-control" name="itemCategory">

以下是脚本代码：

    <script>                        
        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('listcategories.php');
            }
          }
        });
    </script>

我相信这是一些奇怪的问题，可能无法重现，但我希望有人能提供一些机构知识，了解可能导致此类问题发生的原因。

以下是额外文本的图像，在开发工具中：

非常感谢任何建议或建议。谢谢。

可行代码

由于@Girish的帮助，以下内容“解决”了这个问题。 我认为这是一个错误，目前在jQuery或Typeahead的更近版本中引入。 这段代码只是手动删除多余的元素，尽管希望有些东西会出现，以防止它被放置在那里，从而消除额外的代码。 现在对我有用。

        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('tags.php');
            }
          }
        });
        $('.tagsInput').on('itemAdded', function(event) {
            setTimeout(function(){
                $(">input[type=text]",".bootstrap-tagsinput").val("");
            }, 1);
        });

- dcclassics

---

你的 jsfiddle 没有工作。 - Dhiraj

@DhirajBodicherla，你说的“不工作”是指没有展示我的问题还是展示了我的问题？ - dcclassics

从http://www.kobrien.me/包含的文件面临`net：：ERR_INSECURE_RESPONSE`错误，并且无法在fiddle中加载。请尝试从某个CDN包含文件。 - Dhiraj

你能推荐一种在 jsfiddle 上托管这些文件而不会面临此问题的方法吗？我的服务器证书是自签名的。 - dcclassics

尝试使用https://rawgit.com/。这在jsfiddle上肯定有效。只需将原始的js/css文件粘贴到rawgit.com中。Rawgit会生成可以包含在jsfiddle中的cdn.rawgit.com网址。 - Dhiraj

正是我所需要的！谢谢。请检查https://jsfiddle.net/aawmp3np/。 - dcclassics

Answer 1

我不确定这是否是一个错误，该函数内没有任何自定义代码，但所选标签在输入字段中重复出现，您可以使用替代方案itemAdded事件从input字段中删除所选值，请参见下面的示例代码。

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});
$('input').on('itemAdded', function(event) {
    setTimeout(function(){
        $(">input[type=text]",".bootstrap-tagsinput").val("");
    }, 1);
});

我还注意到输入字段在生成每个标签部分，因此无法针对输入字段进行定位，由于输入字段的动态生成，您还需要延迟从<selector>选择输入元素。

演示

更新: $.get()函数返回xhr对象而不是服务器响应，所以您需要添加callback方法来获取AJAX响应，请参见下面的示例代码。

$('.tagsInput').tagsinput({
      confirmKeys: [13, 44],
      maxTags: 1,
      typeahead: {                  
          source: function(query) {
            return $.get('listcategories.php').done(function(data){
              /*if you have add `content-type: application/json` in 
                server response then no need to parse JSON otherwise,
                you will need to parse response into JSON.*/
              return $.parseJSON(data);
            })
          }
      }
 });

- Girish

---

不幸的是，似乎我无法使用从JSON中提取的自己的数据集使其正常运行。 - dcclassics

我已将此标记为正确答案，因为我的悬赏即将到期，我认为你应该得到这些积分，但我认为问题并没有解决，可能是一个错误。感谢您的帮助，@Girish。 - dcclassics

适用于添加情况，但对于重复情况（当标签已存在时）不起作用。 - SerjG

Answer 2

使用 afterSelect 选项的简洁解决方案：

$(".tags").tagsinput({
     typeahead: {
        afterSelect: function(val) { this.$element.val(""); },
        source: keywords
     }
});

- jim smith

---

发布后不久，我放弃了tagsinput。问题太多了。相反，我选择了Tagify，这是一个具有内置下拉菜单的js/scss解决方案。更加简洁和简单。 - jim smith

感谢您提到Tagify！在阅读了您的评论后，我转而使用它，发现它更加简洁、简单，且不易出错。这使得我的开发工作变得更加容易。非常感谢！ - Alexander

更好的解决方案。在第二次选择/输入相同的值时也能工作。 @Girish的解决方案对于这种情况不起作用。 - van9petryk