jquery - Twitter Bootstrap 3 Typeahead/Tagsinput 完成两次

Question

编辑:已添加working JSFiddle

我正在使用 Twitter Bootstrap TagsInput 和 Bootstrap Typeahead。我的源是一个 json 文件，但这无关紧要，我已经检查了静态源。

预输入和标签输入正在工作，但是当我按 Enter、Tab 或单击标签时，它会创建重复的完整内容。

每当我按下回车键或完成预先输入时，就会发生极端的“默认”。如果我通过用逗号分隔或将焦点从窗口移开来中断提前输入，则不会发生这种情况。

这是输入:

<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>

我确信这是一些奇怪的事情，如果我幸运的话，是无法重现的，所以我希望有人能拥有一些他们知道会导致这样的事情发生的机构知识。

这是 dev 中的额外文本的图像。工具:

我非常感谢任何意见或建议。谢谢。

工作代码

感谢@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);
        });

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);
});

我还注意到输入字段正在生成每个标签部分，所以 this或event无法作为目标标签输入字段，由于动态生成输入字段，您还需要延迟从 <selector> 选择输入元素

DEMO

更新:$.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);
            })
          }
      }
 });