javascript - 我的数据列表搜索表单不起作用

Question

我正在尝试将数据列表与实际链接结合起来以制作自动完成搜索表单...这是我的代码:

<form action="#">
    <input list="results" type="text" placeholder="Search Me ;)">  
</form>
<datalist id="results" onchange="location = this.options[this.selectedIndex].value;">
    <option value="Home.html">Home</option>
    <option value="Contact.html">Contact</option>
    <option value="Sitemap.html">Sitemap</option>
</datalist>

但是它不起作用..有什么建议吗？

----新更新----

是否可以将表单 onsubmit 或操作分配给所选值？

Answer 1

这将起作用，但是您不使用数据列表。 JavaScript:

function checkInput(searchQuery)
{
    if(searchQuery=="Home")
    {
        window.location = "Home.html";
    }
    else if(searchQuery == "Contact")
    {
        window.location = "Contact.html";
    }
    else if(searchQuery == "Sitemap")
    {
        window.location = "Sitemap.html";
    }
    else
    {
        document.getElementById("search").submit();
    }
}

为了让这项工作正常进行，您的表单应该有一个“搜索”ID。 编辑 您的输入有一些更改:

<input type="text" placeholder="Search Me ;)" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }"/>