从数据列表或等效项中强制选择（文本输入）

Question

以下代码用于订购商品，它允许用户自由键入，但它包含从我的数据库填充的数据列表，因此如果他们开始键入其中一个商品，它就会弹出。我想强制文本输入仅接受来自数据库的项目。我怎样才能做到这一点？

<input id="prevName" type="text" list="menuItems">
    <datalist id="menuItems">
        {% for item in menuItems %}
        <option>{{item.name}}</option>
        {% endfor %}
    </datalist>
</input>

自动完成功能还是其他更适合？

Answer 1

你应该使用Chosen代替它，因为即使是bootstrap的typehead插件也不能满足你的需求。

Answer 2

Autocomplete

总是更适合这种情况，因为您始终可以验证用户所做的无效条目，并且您还可以强制文本输入接受数据库将提供给用户的内容。

Answer 3

这就是我在没有任何插件或库的情况下解决强制选择的方法。

document.getElementById('prevName').addEventListener('change',function(){
    if( document.getElementById('menuItems').querySelector('[value='+this.value+']') === null ){
        this.value = '';
    }
});

https://jsfiddle.net/2g60qmt8/3/