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.

Improve this question
2
  • Are you just asking how to add a value to an option element? Wouldn't it be something like this?: <option value="http://www.alabama.gov">Alabama</option> Or perhaps just a data-* attribute? For example: <option data-url="http://www.alabama.gov">Alabama</option> It's not really clear to me where specifically you're stuck. Commented Sep 12, 2017 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 <option> tag and then if I select that option go to that URL. (Thanks for your response!) Commented Sep 13, 2017 at 12:53

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

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!
Indeed window.location.href is the standard way 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.
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 <script> tag trying to get this to fire off. I'm wondering if this has to do with me working in a SharePoint environment? I can try to provide more code if needed--I appreciate your continued help by the way I am sure this is very simple, but I am just unable to get it to work =]
Do you see any difference between behaviour for http and https URLs? You could also try with top.location = url;.
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!
|
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>

Improve this answer

Comments

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.

Improve this answer

1 Comment

i am late again :( just discovered it here github.com/LeaVerou/awesomplete/blob/gh-pages/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.