Twitter Bootstrap 3提前输入/标签输入完成两次 [英] Twitter Bootstrap 3 Typeahead / Tagsinput Completing Twice

问题描述

编辑：添加了

更新： $。get（） 函数返回的是 xhr 对象而不是服务器响应，因此您需要添加 callback 方法来获取AJAX响应，请参见下面的示例代码。

  $（'。tagsInput'）。tagsinput（{
 ConfirmKeys：[ 13，44]，
 maxTags：1，
 typeahead：{
 source：function（query）{
 return $ .get（'listcategories.php'）。done（function （数据）{
 / *如果您在
服务器响应中添加了 content-type：application / json然后不需要解析JSON，否则
您将需要将响应解析为JSON。* / 
返回$ .parseJSON（data）; 
}）
} 
} 
}）； 
  

Edit: Added working JSFiddle

I'm using Twitter Bootstrap TagsInput with Bootstrap Typeahead. My source is a json file, but that is irrelevant, and I've checked with a static source.

The typeahead and tagsinput are working, however when I press enter, tab, or click on a tag, it creates a duplicate complete.

That extre 'default' happens whenever I press enter, or complete the typeahead. If I break the typeahead by separating with comma, or taking focus away from the window, it does not occur.

Here is the input:

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

And here is the script:

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

I'm sure it's something wonky that won't be reproducable, with my luck, so I'm hoping someone will have some institutional knowledge that they know would cause something like this to happen.

Here is an image of the extra text, in dev. tools:

I really appreciate any advice or suggestions. Thank you.

WORKING CODE

Thanks to @Girish, the following was what "fixed" this issue. I believe it to be a bug at this point in time, introduced somewhere in a more recent version of jQuery or the Typeahead. This code just manually removes the extra element, although hopefully something will come along to prevent it from being placed there in the first place, eliminating the extra code. For now it works for me.

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

解决方案

I'm not sure this is looking bug, nothing custom code inside function, but selected tag is repeated in input field, but you can use alternative solution, itemAdded event to remove selected value from input field, see below sample code.

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

I have also noticed the input field is generating every tag section so this or event couldn't be targeted tag input field, due to dynamic generation input field you will also need to delay to select input element from <selector>

DEMO

UPDATE : $.get() function is return xhr object not server response, so you need add callback method to get AJAX response, see below sample code.

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

这篇关于Twitter Bootstrap 3提前输入/标签输入完成两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！