Javascript / Jquery从＆lt; input＆gt;转到URL


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

我的问题：我正在寻找一个输入框，当我输入建议时自动完成它们。键入后，通过单击或按Enter键选择第一个选项(这已在插件中找到)，我想提交与URL绑定的选择，以重定向到新的URL。

插件的基本示例

这是直接从开发人员的网站和一个使用的例子。

1
2
3
4
5
6
7
8
9
10
<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等。

1
2
3
4
5
6
7
8
9
10
<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>

1
I stuck here:

在进行了多次搜索之后，发现需要jquery或javascript来实现这一点，我尝试过一些解决方案，但似乎无法使其正常工作。这甚至不可能。我不想写太多我试过的东西，把帖子弄得乱七八糟，所以我尽量把它放在最基本的形式，并牢记这个想法。

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

相关讨论

您可以将URL存储在value属性中，然后在进行输入时读取：

1
2
3
4
5
6
7
8
9
10
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;
});
1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js">
<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>

相关讨论

在awesomplete的API中，您将找到事件列表。一旦事件发生，awesomplete selectcomplete将在用户选择其选项时激发事件。这就是你想要的。

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

见下面的代码：

1
2
3
4
5
6
7
8
9
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";
});
1
2
3
4
5
6
7
8
9
10
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js">
<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>

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

相关讨论

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

例如(在blure事件上)：

1
2
3
4
5
6
7
8
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
});
1
2
3
4
5
6
7
8
9
10
11
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<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>