如何創建接受選擇選項的值的輸入（type = text）？

Question

在HTML中，我們創建輸入框，input(type='text')和

<select> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 

如何使一個文本框，允許選擇只提供選擇，要麼通（選擇標籤或其他方式）。這個想法是，用戶可以輸入輸入，而不必從下拉列表中選擇。

我可以使用typeahead。但是如何限制輸入僅限於打印選項。通過javascript？這是唯一的解決方案嗎？

Answer 1

一些偉大的插件是提到，但如果你正在尋找更多的customiz可以通過幾行jQuery輕鬆完成此任務。以下代碼將輸入限制爲預定義的單詞列表（在這種情況下，列表是在HTML標記中定義的，但列表也可以在JavaScript中實現）。你可以很容易地擴展這個解決方案，正好你想要的。這是fiddle。

HTML

<input type="text" data-values="Volvo,Saab,Opel,Audi"> 

的JavaScript

$("input").on("keyup", function() { 
    var input = $(this).val(); 
    var values = $(this).data("values").split(","); 
    var found = false; 
    $(values).each(function(index, value) { 
     if (value.toLowerCase().indexOf(input.toLowerCase()) > -1) { 
      found = true; 
     } 
    }); 
    if (!found) { 
     $(this).val($(this).val().slice(0,-1)); 
    } 
}); 

Answer 2

選擇和選擇二是更適合這個比預輸入：

• Chosen http://harvesthq.github.io/chosen/
• Select2 http://ivaynberg.github.io/select2/

Answer 3

你可以自動完成爲此，

var givenoptions = ["Volvo", "Saab", "Opel", "Audi"] 
    empty = ""; 

    $('#selecttext').autocomplete({ 
autoFocus: true, 
source: givenoptions 
}).keyup(function() { 
    var isValid = false; 
    for (i in givenoptions) { 
    if (givenoptions[i].toLowerCase().match(this.value.toLowerCase())) { 
     isValid = true; 
    } 
} 
if (!isValid) { 
    this.value = empty 
} else { 
    empty = this.value; 
} 
}); 


<input id="selecttext" />