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

Chosen和Select2比typeahead更适合这个：

Answer 2

提到了一些很棒的插件，但如果你正在寻找一个更可定制的解决方案，你可以通过几行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 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" />

如何创建接受select选项中的值的输入（type = text）？

3 个答案: