引導，只有事先鍵入的內容允許列表值

Question

是否有可能限制用戶的選擇的引導項目事先鍵入的內容預定義的數據源中的項？因此，如果用戶鍵入不在數據源中的內容，則會顯示一條消息，通知他們這樣的內容？

這裏的演示：http://cruiseoutlook.com/test

Answer 1

如果我的理解，當預輸入組件失去焦點，用戶應警惕其輸入是無效的，如果它不在列表中？因此

該代碼將是這樣的：

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

只是要小心，擔心的是，indexOf不IE6-8實現。但是可以找到墊片，例如：Best way to find if an item is in a JavaScript array?。

Answer 2

使用jQuery和薩穆埃爾的解決方案，我想你一定會克服IE的問題。將您的validateSelecion功能更改爲：

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

請按照Samuel的指示離開休息室。

Answer 3

我遇到同樣的問題，但在我的情況我所有的我的數據是遠程。 Bloodhound並沒有真正的鉤子，我目前意識到這一點可以讓你做到這一點，但你可以掛鉤到ajax complete回調並手動建立一個有效的輸入緩存，然後檢查變化/模糊。

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

Answer 4

我解決了這個問題有點不同 - 大部分時間您需要捕獲的建議選項標識，張貼到後續的Web服務調用等

我決定空出當前端異步調用開始時隱藏字段，並將隱藏字段的值設置爲自動完成或選定的單頭事件上的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); 

大約有正在被傳遞到自動完成和選擇的功能，事件，基準和名稱三個參數的預輸入文檔的會談，但我從來沒有見過的名字，這就是爲什麼我用$（this）.attr（'name'）機制來獲取字段的名稱。