CODEWITHSUNDEEP
javascriptjqueryhtml-datalist
H. Klamp
H. Klamp

Reputation: 31

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>

The Basic Changes

What I would use it for is to navigate a list of U.S. states. The idea here would be to redirect a new (or current window) to the URL associated with the state. Alabama going to http://www.alabama.gov, and so on. 

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

After going through many searches and seeing that Jquery or Javascript is required for this, I've tried to go through some solutions, but cannot quite seem to make it work. It might not even be possible. I didn't want to throw in too many examples of what I tried and clutter the post up, so I tried to leave it in its most basic form with the idea in mind.

As far as I know, I'd need to tie a URL to a value with the option tag, correct? I have examples of this in my code, but once again, I tried to leave this in its most basic form for the viewer.

Upvotes: 2

Views: 1947

Answers (3)

trincot
trincot

Reputation: 350262

You could store the URL in a value property, and then read that out when the input is made:

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>

Upvotes: 1

G.Hunt
G.Hunt

Reputation: 1414

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>

As you can see, I don't know the URLs for any of the government websites, but you can build up the URL as you need to.

Upvotes: 0

Sagiv b.g
Sagiv b.g

Reputation: 31024

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>

Upvotes: 0

Related Questions