我的问题：我正在寻找一个输入框，当我输入时自动填充建议。通过点击或按下回车键，在输入第一个选择（这已经在插件中已经计算出来）后，我想提交与URL关联的选择以重定向到新的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存储在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>

---

在我看来，你已经完成了大部分工作，只需要编写一个小的javascript / jquery函数来执行重定向。

例如（在blure事件上）：

var placeHolder = '[countryCode]';
var urlTemplate = 'https://www.' + placeHolder + '.gov';
$('.awesomplete').on('blur', function(e){
  var value = e.target.value;
  var nextUrl = urlTemplate.replace(placeHolder,value);
  console.log('redirecting to - ' + nextUrl);
  //window.location.href = nextUrl; // uncomment for redirecting
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

---

在Awesomplete的API中，您可以找到事件列表。 一旦事件发生，awesomplete-selectcomplete在用户选择其选项时触发事件。 这是你想要的东西。

您将需要使用方法window.location.href重定向用户。

见下面的代码：

var input = document.getElementById('myinput');

new Awesomplete(input);
input.addEventListener('awesomplete-selectcomplete', (e) => {
  // This callback will be called whenever a selection is made.
  console.log(e.text.label) // Grabs the text of the selection
  console.log('navigating to: ' + "www." + e.text.label + ".gov")
  //window.location.href = "www." + e.text.label + ".gov";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script>
<input id="myinput" 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> 

链接地址: http://www.djcxy.com/p/42205.html

上一篇: Javascript/Jquery to go to URL from <input> and <datalist>

下一篇: jquery go to search page when user clicks on auto completed search results?