创建基本的自动完成建议列表

Question

How can I create an auto-complete suggestion list below the search box that: 如何在搜索框下方创建自动完成建议列表，该列表为：

Users can use keyboard Down & Up key to navigate between them? 用户可以使用键盘Down和Up键来进行导航？
Users can use Esc button to close the suggestion list? 用户可以使用Esc按钮关闭建议列表吗？
When users press keyboard Down or Up key, the suggestion that is selected will be filled inside the search box? 当用户按下键盘上的Down或Up键时，所选择的建议将填充在搜索框中？

This is my current code for index.php: 这是我当前的index.php代码：

<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
                position: absolute;
                background-color: white;
                z-index: 10;
            }
            #suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 648px;
                height: auto;
                text-align: left;
                padding: 2px;
            }
            #suggestion a:hover {
                background-color: #dddddd;
                width: 644px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()"/>

                        <div id="suggestion" style="width: 648px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                        <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                    </td>
                </tr>
            </table>
            <input type="hidden" name="page" value="1" />
        </form>
    </body>
</html>

Thanks in advance. 提前致谢。

Answer 1

Use Jquery UI AutoComplete, here is the example code 使用Jquery UI自动完成功能，这是示例代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {

  var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Example taken from - http://jqueryui.com/autocomplete/ 示例取自-http://jqueryui.com/autocomplete/

    /**
         This code below loads the autocomplete for your input field,
         where in "#tags" is the id of your element where this should
         be displayed in and "availableTags" is the array of list of
         possible values to be shown in autocomplete list
     */
     $( "#tags" ).autocomplete({
      source: availableTags
    });

If you want to fetch data dynamically through PHP that is stored in database, you may want to use http://jqueryui.com/autocomplete/#remote 如果要通过存储在数据库中的PHP动态获取数据，则可能要使用http://jqueryui.com/autocomplete/#remote

创建基本的自动完成建议列表

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-27 10:26:52

创建基本的自动完成建议列表

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-27 10:26:52

解决方案1
1 已采纳 2013-12-27 10:26:52