不带链接的 jQuery 的自动完成下拉列表

Question

我正在尝试使用 HTML5 datalist 属性的自动完成下拉菜单，而不使用 JQuery。但是我希望每个建议在被选中时转到特定的 link（或者当按下回车键时，转到第一个建议）。

我现在拥有的是：

<form action="www.site.com/search?q=" method="get">

 <input name="q" type="text" id="txtAutoComplete" list="languageList"/>

  <datalist id="languageList">

   <option value="OPTION1" />
   <option value="OPTION2" />

  </datalist>

</form>

在这种情况下，它会在站点中执行搜索。我希望每个选项都打开一个特定的 link，或者在 link http://www.hitsebeats.ninja/search/label/[= 的末尾使用 value 27=]，它转到 Blogger 中的正确标签。在最后一种情况下，我考虑添加事件 onclick:

<datalist id="languageList" onclick='location=this.options[this.selectedIndex].value;>

    <option value='http://www.hitsebeats.ninja/search/label/OPTION1'>
    OPTION1
    </option>

</datalist>

但是没有成功。

Answer 1

OP在评论中反馈后添加另一个答案。仅当数据列表中存在键入的选项时才应重定向。

<script>
    function redirect(value) {
        var options = document.getElementById("languageList").options;

        for(var i = 0; i < options.length; i++) {
            if (options[i].value == value)
                window.location='http://www.example.com/' + value;
        };
    }
</script>
<form action="http://www.example.com/search?q=" method="get">
  <input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="redirect(this.value)" />

  <datalist id="languageList">
    <option value='OPTION1'>OPTION1</option>
    <option value='OPTION2'>OPTION2</option>
  </datalist>
</form>

第一次尝试

在输入元素上使用 oninput，您可以根据您选择的选项更改位置。

<form action="http://www.example.com/search?q=" method="get">
  <input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="window.location='http://www.example.com/' + this.value" />

  <datalist id="languageList">
    <option value='OPTION1'>OPTION1</option>
    <option value='OPTION2'>OPTION2</option>
  </datalist>
</form>

告诉我这是否符合您的预期。

Answer 2

所以你知道，datalist 没有选择的事件，它不是用户控件。但是您可以收听输入更改事件，他们用它来更改 url.

不带链接的 jQuery 的自动完成下拉列表

Autocomplete dropdown without jQuery with links

html

javascript

autocomplete

html-datalist

第一次尝试