重定向到基於用戶輸入到自動填充字段的網址

我發現我正在嘗試做的事情的編碼，但不知道如何將它們組合。我已經複製下面我發現，似乎單獨工作的兩個代碼塊。我不十分了解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>

而自動完成

https://jqueryui.com/autocomplete/

來源

2015-09-09 Russell Benjamin

對於一個硬編碼自動完成解決方案，當選擇選項時重定向，你可以這樣做：

<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); 
    }); 
});

來源

2015-09-09 18:29:17 Mark

只要輸入的值是一個實際的網頁，這將工作。自動填充功能只能爲您提供建議。它不會強制您選擇其中一個選項。最好使用書寫的'redirect（）'方法。如果你想使用文本框的change事件自動觸發它，你可以說： - $（function（）{$（'＃tags'）。on（'change'，redirect）;}）; –

-1

OK所以首先。自動完成功能是jQuery-UI的一項功能。 jQuery-UI是jQuery插件，它是一個JavaScript庫。和恕我直言，最好的一個。所以如果你想添加自動完成到你的表單，那麼你需要添加對jQuery和jQuery-UI的引用。您可以下載它們並將它們託管在本地服務器上，或者您可以使用像Google這樣的內容分發網絡來引用它們。你還需要引用一個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">

把這個在您的網頁剛結束標記上方的腳：

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

有了這個與頁面其餘的你應該在上面工作。

來源

2015-09-09 18:29:27

所以我將其添加到頭部

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

對不起，有點困惑？謝謝

來源

2015-09-09 19:24:03

重定向到基於用戶輸入到自動填充字段的網址

回答

相關問題