5

私のフィドルはここにあります。

Bloodhoundで動作するように、この回答に基づいて、ここのフィドルの例を拡張しています。

次のスニペットを使用してデータをプリフェッチしています。

prefetch_url='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/cities.json';

var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: prefetch_url,
    ttl:1
});

cities.initialize();

これは、こちらの例に基づいています。

および値フィールドを適切に取得して使用するように、typeahead内を変更しました。tagsinput()text

次の問題があります。

  1. テキストボックスのサイズは常に変化しています。
  2. テキストボックスに入力するとUncaught TypeError: sync is not a function、ファイルからを受け取りbloodhound.jsます。

に基づいてテキストボックスに入力したいと思いcities.jsonます。したがって、アムステルダムとワシントンに入ると、 が表示されるはず$("#myBox").val() = "1,4"です。

タイプアヘッドの異なるバージョンを誤って混在させている可能性があると思いますが、JS ファイルのいくつかの組み合わせを試してみましたが、うまくいきませんでした。

4

1 に答える 1

2

最初の問題は、単純な css の修正です。次の css は、Textbox を親要素の幅と一致させます。代わりに固定幅を好む場合は、固定値を設定してください

/* match parent element width */
.bootstrap-tagsinput {
  width: 100%;
}

/* alternatively set a fixed width */
.bootstrap-tagsinput {
  width: 320px;
}

2 つ目の問題は、構成の誤りにありました。tagsinput プラグインのプロパティitemValueと設定を忘れました。itemText選択した都市にデータを入力するメソッドも追加しました。この機能が必要ない場合は、メソッドを削除してpopulateValues()ください。

もちろん、この実装を改善する余地はいくらかありますが、これは自分で簡単に行うことができますよね?

編集： promiseを使用してさらにデバッグした後、コメントに記載されているOPの問題が修正されるようです。

ここで実際の例を見つけることができます: http://jsfiddle.net/21fbf1L8/3/

リポジトリの例: https://github.com/gearsdigital/so-questions-38493752-

于 2016-07-31T21:17:12.803 に答える