Javascript/Jquery 从 <input> 和 <datalist> 转到 URL

Question

我的问题：我希望制作一个输入框，在我输入建议时自动完成建议。在输入它们后，通过单击或按 enter 进行第一个选择（这已经在插件中确定），我想提交选择绑定到 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>

基本变化

我会用它来导航 U.S 的列表。状态。这里的想法是将新的（或当前的 window）重定向到与状态关联的 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 是必需的，我尝试了一些解决方案，但似乎不太奏效。这甚至可能是不可能的。我不想举出太多我尝试过的例子，把 post 搞得一团糟，所以我试着把它留在最基本的形式中，并牢记这个想法。

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

Answer 1

在我看来你已经完成了大部分工作，只需要编写一个小的 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>

Answer 2

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

如您所见，我不知道任何政府网站的 URL，但您可以根据需要构建 URL。

Answer 3

您可以将 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 从 <input> 和 <datalist> 转到 URL

Javascript/Jquery to go to URL from <input> and <datalist>

javascript

jquery

html-datalist

插件的基本示例

基本变化