7

編集：作業JSFiddleを追加

Bootstrap Typeahead で Twitter Bootstrap TagsInput を使用しています。私のソースはjsonファイルですが、それは無関係であり、静的ソースで確認しました.

ここに画像の説明を入力

typeahead と tagsinput は機能していますが、Enter キー、Tab キー、またはタグをクリックすると、完全な複製が作成されます。

ここに画像の説明を入力

Enterキーを押すか、先行入力を完了するたびに、その極端な「デフォルト」が発生します。カンマで区切るか、ウィンドウからフォーカスを外してタイプアヘッドを壊すと、それは発生しません。

入力は次のとおりです。

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

2 に答える 2

5

これがバグに見えるかどうかはわかりません。関数内にカスタムコードはありませんが、選択したタグが入力フィールドで繰り返されますが、代替ソリューション、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>

デモ

UPDATE :$.get()関数はxhrサーバー応答ではなくオブジェクトを返すため、AJAX 応答を取得するメソッドを追加する必要がありcallbackます。以下のサンプル コードを参照してください。

$('.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);
            })
          }
      }
 });
于 2015-04-02T12:52:18.333 に答える
3

afterSelectオプション を使用した冗長性の低いソリューション:

$(".tags").tagsinput({
     typeahead: {
        afterSelect: function(val) { this.$element.val(""); },
        source: keywords
     }
});
于 2018-11-20T02:09:57.820 に答える