javascript - 如何创建接受来自选择选项的值的输入（类型=文本）？

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>

你如何制作一个文本框，它只允许通过（选择标签或其他方式）提供的选项中的选项。这个想法是用户可以输入输入而不是必须从下拉列表中进行选择。

我可以使用预输入。但是如何将输入限制为预输入选项。通过javascript？那是唯一的解决方案吗？

Answer 1

Chosen 和 Select2 比 typeahead 更适合这个：

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

Answer 2

提到了一些很棒的插件，但是如果您正在寻找更可定制的解决方案，您可以使用几行 jQuery 轻松完成此操作。以下代码将输入限制为预定义的单词列表（在这种情况下，列表是在 HTML 标记中定义的，但该列表也可以在 JavaScript 中实现）。您可以轻松扩展此解决方案以完全满足您的需求。这是一个小提琴。

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 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" />