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>

然而它不起作用..有什么建议吗？

---- NEW UPDATE ----

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

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

Answer 2

遗憾的是，您无法将链接嵌入到数据列表中

例如

      <option value="home"><a href="home.html">Home</a></option>

dom根本不起作用。

您需要使用javascript自行构建解决方案。

我建议看看http://www.jqueryui.com他们可能有什么可以帮助你

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

2 个答案: