5

Bootstrap Typeahead プラグインを次のように使用しています。

$('#Organisation').typeahead({
            source: function (query, process) {
                return $.get(AppURL + 'Organisations/Manage/SearchByName/',
                {
                    term: query
                },
                function (data) {
                    var results = [];
                    var fullResults = [];
                    $.each(data, function (index, item) {
                        results.push(item.label);
                        fullResults.push({
                            id: item.ID,
                            label: item.label
                        });
                    });

                    return process(results);


                });
            },
            updater: function (selection) {
                $('#OrganisationID').val(selection);
            }
        });

2 つの配列が返されました。これは、Typeahead がオブジェクトではなく文字列のリストのみを必要とするためです。2 番目の配列には、ラベルと ID の両方が含まれています。

ユーザーがリストからアイテムを選択したら、この選択から ID を取得し、それを使用して隠しフィールドに挿入する必要があります。ただし、Typeahead を介して ID を渡すことができないため、選択は名前だけになります。

これを解決する方法についてのアイデアはありますか?

返される 2 つの配列の例:

結果：["Organisation 1","Organisation 2"]

完全な結果:[{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]

4

4 に答える 4

6

ネットで少し調べてみたら、このHowToを見つけました。その中で、彼らはあなたが望むことをしますが、ajax はありません。

ソース関数からオブジェクトを返すこともできるはずですが、typeahead のすべてのヘルパー関数を再実装する必要があります。

于 2013-04-19T14:06:42.343 に答える
3

通常、JSON オブジェクトを Bootstrap Typeahead (2.x) 内で直接使用することはできませんが、簡単に微調整してそうすることができます。この質問の文言は、人々がこれを 1 か所で見つけるのに役立つはずです。他の質問も同様のことを尋ねていますが、あなたがした方法と同じではありません。

var typeahead = control.typeahead({ /* ... */ }).data('typeahead');

// manually override select and render
//  (change attr('data-value' ...) to data('value' ...))
//  otherwise both functions are exact copies
typeahead.select = function() {
    var val = this.$menu.find('.active').data('value')
    this.$element.val(this.updater(val)).change()
    return this.hide()
};
typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

それ以外では、 、 、 、および をオーバーライドする必要がありますhighlighterがmatcher、sorterこれらupdaterは typeahead に渡されたオプションを介して行うことができます。渡されたものはitemJSON オブジェクトになりました。

items を選択すると、updaterが呼び出されます。これは、値を設定して JSON データを使用する方法です。

updater: function (item) {
    someGlobalValue = item.id;

    // must return a normal string; sets the textbox value
    return item.name;
}

これはまた、他の回答で参照されている Typeahead の例の外部にある項目を、関連付けるのに特別なことをする必要がないこと、または「覚えている」必要がないことも意味します。オーバーライド プロセス全体の中で最も厄介な部分は、sorter使用するたびに を書き換えることです。

于 2013-04-23T02:34:26.303 に答える
3

私は醜い解決策を持っています...

タイトルを検索できるようにする必要がありましたが、最終的にIDをテキスト入力に入れる必要がありました...

私のJSONは

[
{"id": 1, "title": "Foo foo foo"},
{"id": 2, "title": "Bar bar bar"},
...
]

そして私の電話...

$(function() {
    $.get("path/to/data.json", function(data){
          $(".typeahead").typeahead({
              "source": data,
              "displayText": function(item){
                  // OMG ugly !!! :p
                  if (item.id == undefined) return item;
                  return item.title + ' (' + item.id + ')';  
              },
              "updater": function(item) {
                  return item.id;
              }});
    }, 'json');
});

すべてが通常どおり機能していますが、選択したアイテムをクリックすると、ID のみがフィールドに入力されます...

終わり ！醜いが終わった...

https://github.com/bassjobsen/Bootstrap-3-Typeaheadでテスト済み

于 2016-10-28T17:03:22.910 に答える