Javascript/Jquery 从 <input> 和 转到 URL

Question

我的问题:我希望制作一个输入框，在输入建议时自动完成建议。通过单击或按 Enter 键输入第一个选择(这已经在插件中找到)后，我想提交选择与 URL 绑定(bind)以重定向到该新 URL。

插件的基本示例

这里直接来自开发者的网站以及所使用的示例。

<input class="form-control awesomplete" list="mylist" />
<datalist id="mylist">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Brainfuck</option>
	<option>LOLCODE</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

基本变化

我将用它来导航美国各州的列表。这里的想法是将新的(或当前窗口)重定向到与状态关联的 URL。阿拉巴马州前往 http://www.alabama.gov ， 等等。

<input class="form-control awesomplete" list="states" />
<datalist id="states">
	<option>Alabama</option>
	<option>Alaska</option>
	<option>Arizona</option>
	<option>Arkansas</option>
	<option>California</option>
	<option>Colorado</option>
	<option>Connecticut</option>
</datalist>

I stuck here:

经过多次搜索并发现需要 Jquery 或 Javascript，我尝试了一些解决方案，但似乎无法使其正常工作。这甚至可能是不可能的。我不想添加太多我尝试过的例子，从而使帖子变得困惑，所以我尝试将其保留在最基本的形式中，并牢记这个想法。

据我所知，我需要将 URL 与带有选项标记的值绑定(bind)起来，对吗？我的代码中有这样的示例，但我再次尝试将其保留为最基本的形式以供查看者使用。

Answer 1

您可以将 URL 存储在 value 属性中，然后在输入时将其读出:

var aweInput = new Awesomplete(myinput);
myinput.addEventListener('awesomplete-select', function(e) {
  var url = e.text.value; // The value associated with the selection
  console.log('navigating to: ' + url)
  // Some optional actions:
  e.preventDefault(); // Prevent the URL from appearing in the input box
  e.target.value = e.text.label; // Set the value to the selected label
  aweInput.close(); // close the drop-down
  //window.location.href = url;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.css" />
<input id="myinput" list="states" />
<datalist id="states">
	<option value="http://www.alabama.gov/">Alabama</option>
	<option value="http://alaska.gov/">Alaska</option>
	<option value="https://az.gov/">Arizona</option>
	<option value="http://www.arkansas.gov/">Arkansas</option>
	<option value="http://www.ca.gov/">California</option>
	<option value="https://www.colorado.gov/">Colorado</option>
	<option value="http://portal.ct.gov/">Connecticut</option>
</datalist>