Question

Why is this list not working?

I need to combine three things: input box + select list + links.

This is my attempt:

<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>

Please help me to get a combo of this three things. After using the input box to select an option of the list and pressing ENTER the list has to open the link.

Thanks.

The following select works. I only need to add an input box to it:

<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

以下代码应该准确无误。检查jsFiddle。我在输入字段中添加了id="autocomplete"，jQuery检查在字段中按下ENTER键的时间，并根据它重定向页面。

使用ENTER键按下事件修改答案：

＆＃13;

$(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;
      });
});

＆＃13;

<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>

＆＃13;

或者你也可以使用输入更改（不按ENTER键）：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

旁注 - 您应该添加逻辑以验证该值是否为URL ...

Input box + select list + links

2 个答案: