Question

我已经找到了我正在尝试做的事情的编码但却不知道如何将它们组合起来。我在下面复制了我发现的两个代码块，它们似乎单独工作。我不太了解javascript但是想学习..谢谢

根据用户输入重定向到网址

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

Answer 1

对于硬编码的自动完成解决方案，当选择选项时重定向，您可以执行以下操作：

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

Answer 2

所以我把它添加到头部

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

抱歉，有点困惑？感谢

Answer 3

首先确定。自动完成功能是jQuery-UI的一项功能。 jQuery-UI是jQuery的一个插件，它是一个javascript库。和恕我直言最好的一个。因此，如果要在表单中添加自动完成功能，则需要添加对jQuery和jQuery-UI的引用。您可以下载它们并在本地托管它们，也可以使用谷歌等内容交付网络来引用它们。您还需要引用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>

在页面中显示上面的其余部分应该可以正常工作。

根据用户输入自动填充字段

3 个答案: