根据用户输入的URL自动重定向到自动完成字段
[英]Redirect to a url based on user input to an autocomplete field
问题描述
我已经找到了我想做的两件事的编码，但不知道如何组合它们。 我在下面发现的似乎可以单独工作的两个代码块下面复制了代码。 我对javascript不太了解，但是想学习..谢谢
根据用户输入重定向到URL
<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>
和自动完成
3 个解决方案
解决方案1
1 2015-09-09 18:29:17
对于硬编码的自动完成解决方案，当选择了选项时会重定向，您可以执行以下操作：
<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>
autocompelte非常简单，请按照您提供的jqui网站上的说明进行操作。 然后，您可以简单地将事件处理程序添加到自动完成输入中，更改后，该事件处理程序将打开一个具有当前值的页面。...这部分代码是：
$(function(){
$("#tags").change(function(){
var x = $(this).val();
window.location.replace(x);
});
});
解决方案2
0 2015-09-09 19:24:03
那我把这个加到头上
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
并在下面：
<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 });
});
对此：
<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>
对不起，只是有点困惑？ 谢谢
解决方案3
-1 2015-09-09 18:29:27
好的，首先。 自动完成功能是jQuery-UI的功能。 jQuery-UI是jQuery的插件，它是一个javascript库。 恕我直言，最好的之一。 因此，如果要向表单添加自动完成功能，则需要添加对jQuery和jQuery-UI的引用。 您可以下载它们并将其托管在本地服务器上，也可以使用Google之类的Content Delivery Network来引用它们。 您还需要引用jQuery-UI CSS主题。
因此，将其放在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">
将其放置在页面底部，紧接在body标记上方：
<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>
页面中的其他内容以及上面的所有内容都可以使用。
根据用户输入重定向到特定的url，但是如果不存在预定义的关键字，则搜索站点
[英]Redirect to specific url based on user input but if no pre-defined keyword exists search the site
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.