Javascript/Jquery to go to URL from <input> and <datalist>
My problem: I am looking to make an input box that autocompletes suggestions as I type them in. Upon typing them taking the first selection (this is already figured out in the plug-in) by either clicking or pressing enter, I'd like to submit that selection which is tied to a URL to redirect to that new URL.
Basic Example of Plug-in
This here is directly from the developer's website and an example of what is used.
<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>It seems to me that you already did most of the job, just need to write a small javascript / jquery function to do the redirect.
For example (on blure event):
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>Within the API for Awesomplete, you'll find the event list. Once of the events, awesomplete-selectcomplete, fires an event when the user has selected their option. This is what you'll want to hook into.
You'll want to redirect the user with the method window.location.href .
See code below:
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>