15

ユーザーの選択を、Bootstrap Typeaheadアイテムの事前定義されたデータソースアイテムに制限することは可能ですか？したがって、ユーザーがデータソースにないものを入力すると、そのことを通知するメッセージが表示されますか？

デモは次のとおりです：http：//cruiseoutlook.com/test

4

4 に答える 4

18

私が理解している場合、先行入力コンポーネントがフォーカスを失ったとき、それがリストにない場合、その入力が無効であることをユーザーに警告する必要がありますか？

したがって、コードは次のようになります。

var myData = [...]; // This array will contain all your possible data for the typeahead

$("#my-type-ahead").typeahead({source : myData})
                   .blur(validateSelection);

function validateSelection() {
    if(source.indexOf($(this).val()) === -1) 
        alert('Error : element not in list!');
}

indexOfIE6-8に実装されていないことに注意してください。しかし、シムを見つけることができます。たとえば、次のようになります。アイテムがJavaScript配列にあるかどうかを確認する最良の方法は？。

于 2012-12-06T12:59:50.853 に答える
6

同じ問題が発生しましたが、私の状況では、すべてのデータがリモートでした。Bloodhoundには、これを可能にする現在認識している優れたフックはありませんが、ajaxの完全なコールバックにフックして、有効な入力キャッシュを手動で構築し、変更/ぼかしでそれを確認できます。

var myData = new Bloodhound({
    remote: {
        url: '/my/path/%QUERY.json',
        ajax: {
            complete: function(response){
                response.responseJSON.forEach(function (item) {
                    if (myData.valueCache.indexOf(item.value) === -1) {
                        myData.valueCache.push(item.value);
                    }
                });
            }
        }
    }
});
myData.valueCache = [];
myData.initialize();

$('#artists .typeahead').typeahead(null, {
    source: myData.ttAdapter()
}).bind('change blur', function () {
    if (myData.valueCache.indexOf($(this).val()) === -1) {
        $(this).val('');
    }
});
于 2015-01-20T11:38:07.403 に答える
4

jqueryとSamuelのソリューションを使用すると、IEの問題を克服できると思います。validateSelecion関数を次のように変更します。

function validateSelection() {
    if ($.inArray($(this).val(), myData) === -1) 
        alert('Error : element not in list!');
}

サミュエルが指摘したように残りを残します。

于 2013-04-24T15:39:47.707 に答える
1

私はこの問題を少し異なる方法で解決しました。ほとんどの場合、提案されたオプションのIDを取得したり、後続のWebサービス呼び出しに投稿したりする必要があります。

typeahead非同期呼び出しの開始時に非表示フィールドを空白にし、オートコンプリートまたは選択されたタイプヘッドイベントの非表示フィールドの値をdatum.idに設定することにしました。

フォームを送信するとき、非表示のフィールドに値があるかどうかを確認するだけです。値がない場合、ユーザーは提案されたオプションを選択しませんでした。

先行入力フィールドの名前に基づいて_idを追加して非表示フィールドに名前を付け、このコードをonAutocompleted関数とonSelected関数で使用しました

これらの関数を追加して指定しました。

.on('typeahead:selected', onAutocompleted)
.on('typeahead:autocompleted', onSelected)

入力フィールドに.typeahead機能を追加するコード内。

var n = $(this).attr('name')+'_id';
$('input[name="' + n + '"]').val(datum.id);

先行入力のドキュメントでは、オートコンプリートされ選択された関数に渡される3つのパラメーター、イベント、データム、および名前について説明していますが、名前が渡されるのを見たことがないため、$（this）.attrを使用しました。 （'name'）フィールドの名前を取得するメカニズム。

于 2016-06-26T12:50:57.847 に答える