2

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.

Harsh Patel
  • 6,334
  • 10
  • 40
  • 73
H. Klamp
  • 31
  • 3
  • Are you just asking how to add a `value` to an `option` element? Wouldn't it be something like this?: `` Or perhaps just a data-* attribute? For example: `` It's not really clear to me where specifically you're stuck. – David Sep 12 '17 at 12:52
  • Hello David, sorry for the lack of clarity. I do understand the adding of a value, but I'd need to get the script to use that value to redirect to the URL that is in there. It looks like someone else has provided this answer/suggestion and I am currently attempting to get it to work. Essentially, have a URL on the – H. Klamp Sep 13 '17 at 12:53

3 Answers3

1

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>
trincot
  • 317,000
  • 35
  • 244
  • 286
  • Hello Trincot. Yes, this is what I was imagining. Oddly, when I borrow the code, I cannot seem to get it to fire off the redirect. I removed the // which I believe makes the `window.location.href = url;` a "comment" in the code. It appears to be working in the code snippet, but when I run it it on my hosted environment it doesn't seem to fire off. I am going to keep playing with this. Additionally, would it be possible to get it so the URL does not enter into the box, rather, it keeps the normal title within between the tags? Thanks for your help! – H. Klamp Sep 13 '17 at 13:31
  • Indeed `window.location.href` is the [standard way](https://stackoverflow.com/questions/1226714/how-to-get-browser-to-navigate-to-url-in-javascript) to redirect. If that does not work, you may have other code that somehow counter-acts this operation. (2) I updated the code so that the URL does not enter the text box. – trincot Sep 13 '17 at 13:51
  • Is there any chance I am not giving this a proper document load or window onload function? I am making a basic plain page that simply uses the same code as provided while putting the java in a ` – H. Klamp Sep 13 '17 at 16:01
  • Do you see any difference between behaviour for `http` and `https` URLs? You could also try with `top.location = url;`. – trincot Sep 13 '17 at 16:25
  • So I have gotten this to work.. but it only wants to work in Chrome but not IE11, which I figured would also support this type of functionality. I find it odd it works in one browser and not the other? p.s. i did keep the original code, and the http/s doesn't seem to do anything different. Progress is being made! – H. Klamp Sep 13 '17 at 16:48
  • I agree, that is odd in this case. – trincot Sep 13 '17 at 16:52
  • It looks like `addEventListener` is not usable in IE 11. I should probably have inserted which browser I was attempting to use this one when I first made my post--a lesson learned! Currently trying to find the substitute for this that would then allow it to properly function in IE 11. – H. Klamp Sep 13 '17 at 18:22
  • Strange `addEventListener` is supported since IE9. Make sure your HTML file starts with ` `. – trincot Sep 13 '17 at 18:24
  • I must be reading some inaccurate or old information :)! I do have ` ` and `` in my code to make sure there is not a compatibility issue. One thing I notice is I load the page with all of the scripts in it (to avoid path issues) and I get a console syntax error here: `(e) => {` that lands between the = and > signs. Would this give any insight to my individual issue? – H. Klamp Sep 13 '17 at 18:32
  • Yes that error indicates arrow functions are not a supported syntax in IE. They will never add this. I updated my answer to use `function(e) {` instead. – trincot Sep 13 '17 at 18:34
  • This has now worked in IE. I sincerely appreciate your prolonged assistance and help with this. I have marked the answer (while it worked in Chrome) and made sure to vote it up. Thank you again so much! – H. Klamp Sep 13 '17 at 18:40
0

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>
Sagiv b.g
  • 30,379
  • 9
  • 68
  • 99
0

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.

G.Hunt
  • 1,364
  • 10
  • 20
  • i am late again :( just discovered it here https://github.com/LeaVerou/awesomplete/blob/gh-pages/awesomplete.min.js – Niladri Sep 12 '17 at 13:02