Redirect to a url based on user input to an autocomplete field
Question
I have found coding for both things i'm trying to do but have no idea how to combine them. I have copied below the two blocks of code I've found that seem to work individually. I don't know very much about javascript but trying to learn.. thanks
redirect to a url based on user input
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value.toLowerCase();
switch(input) {
case 'keyword1':
window.location.replace('page1.html');
break;
case 'keyword2':
window.location.replace('page2.html');
break;
default:
window.location.replace('error.html');
break;
}
}
</script>
And the autocomplete
3 answers
solution1
1 2015-09-09 18:29:17
For an hardcoded autocomplete solution, that redirects when option is selected you could do something like this:
<script>
$(function() {
//hardcodes autocomplete options
var availableTags = [
"www.google.com",
"www.facebook.com",
];
//initiate autocomplete on the #tages input using the tags defined above
$( "#tags" ).autocomplete({
source: availableTags
});
});
//Watch for a change to the #tags text box
$(function(){
$("#tags").change(function(){
//When value changes, take that value and set variable
var x = $(this).val();
//Change window location using our variable
window.location.replace(x);
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
The autocompelte is pretty simple, follow the instructions on the jqui website you provided. Then you can simple add a event handler to the auto complete input, which , when changed, will open a page with it's current value.... This part of the code is:
$(function(){
$("#tags").change(function(){
var x = $(this).val();
window.location.replace(x);
});
});
solution2
0 2015-09-09 19:24:03
So do I add this to the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
and this below:
<script type="text/javascript">
$(function() {
// this creates an array of words to use in the autocomplete
var availableTags = ["Keyword1", "Keyword2", "Keyword3" ];
// this attaches the autocomplete function to your textbox and assigns the array of words as the source
$( "#userInput" ).autocomplete({ source: availableTags });
});
to this:
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value.toLowerCase();
switch(input) {
case 'keyword1':
window.location.replace('page1.html');
break;
case 'keyword2':
window.location.replace('page2.html');
break;
default:
window.location.replace('error.html');
break;
}
}
</script>
Sorry just a bit confused? Thanks
solution3
-1 2015-09-09 18:29:27
OK so first of all. The Autocomplete is a feature of jQuery-UI. jQuery-UI is a plugin for jQuery which is a javascript library. And IMHO the best one around. So if you want to add autocomplete to your form then you need to add references to both jQuery and jQuery-UI. You can download them and host them on your server locally or you can use a Content Delivery Network like google to reference them. You'll also need to reference a jQuery-UI CSS theme.
So put this in the head of your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
put this at the foot of your page just above the closing body tag:
<script type="text/javascript">
$(function() {
// this creates an array of words to use in the autocomplete
var availableTags = ["Keyword1", "Keyword2", "Keyword3" ];
// this attaches the autocomplete function to your textbox and assigns the array of words as the source
$( "#userInput" ).autocomplete({ source: availableTags });
});
</script>
With this in the page with the rest of what you have above it should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.