从下拉列表中搜索并建议关键字

Question

我正在使用 php 和 javascript。 我已经编写了下拉菜单的代码。 现在我想写一个代码，我在文本框中输入单词，它会从下拉列表中建议单词。 就像我在文本框中输入 'abc' 一样，它会从下拉列表中给出所有以 'abc' 开头的结果。 请在 php 或 javascript 中为我提供正确的代码......这将满足我的条件。 谢谢你。 下面是一个下拉代码。 我想要搜索和建议代码。

<label>Site Name:</label>
<select id="combobox">
 <option value=""></option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
</select>   
<input type="submit" name="submit" value="submit"/> 

Answer 1

也许 datalist 元素可以提供帮助

<form action="action_page.php">
   <input list="browsers">
   <datalist id="browsers">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
   </datalist> 
</form>

取自： http : //www.w3schools.com/html/html_form_elements.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

编辑：

如果你只想要一个 javascript 解决方案：添加：

<input type="text" id="search" onkeyup="change()" />

和

var e = document.getElementById("combobox");
var t = document.getElementById("search");
function change() {
    var ts = t.value.toLowerCase();
    if (ts.length < 1) {
        e.selectedIndex = 0;
        return;
    }
    for (var i = 0; i < e.options.length; i++) {
        var es = e.options[i].text.toLowerCase();
        if (es.lastIndexOf(ts, 0) === 0) {
            e.selectedIndex = e.options[i].index;
            return;
        }
    }
    e.selectedIndex = 0;
}