输入框 选择列表 链接

Question

为什么此列表不工作？

我需要结合三件事：输入框 选择列表 链接。

这是我的尝试：

<input type="text" name="example" list="lemmas">
<datalist onChange="window.location.href=this.value" id="lemmas">
   <option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
   <option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>

请帮助我获得这三件事的组合。使用输入框选择列表的选项并按Enter列表必须打开链接。

谢谢。

以下选择工作。我只需要在其中添加一个输入框：

<select onChange="window.location.href=this.value">
   <option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
   <option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</select>

Answer 1

这是我第一次阅读有关 <datalist/>标签。它似乎没有良好的浏览器支持。

无论如何...您可以将oninput事件处理程序附加到<input/>字段。我不喜欢使用事件属性，所以我将事件附加在JavaScript中。

example.oninput = function () {
   window.location.href = this.value;
}

<input type="text" name="example" id="example" list="lemmas">
<datalist id="lemmas">
   <option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
   <option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>

side -remark-您可能应该添加逻辑以验证该值是否为URL ...

Answer 2

下面的代码应准确地工作。检查JSFIDDLE。我在输入字段中添加了id="autocomplete"，jQuery在字段中按Enter键时检查并根据该页面重定向。

。

通过Enter键按事件进行修订的答案：

$(function(){      
      // check for key press event
      $('#autocomplete').keypress(function (e) {
          var key = e.which;
          var url = $(this).val();           
          // the enter key code
          if(key == 13) {
            if (url) { window.location = url; }
          }
          return false;
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" name="example" list="lemmas">
<datalist id="lemmas">
   <option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
   <option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>

另外，您也可以在输入更改上使用(不输入密钥按下(：

      $('#autocomplete').on('input', function(e) {
          var url = $(this).val(); 
          if (url) { window.location = url; }
          return false;
      });