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

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

php autocomplete

Php 创建基本的自动完成建议列表,php,autocomplete,search-engine,autosuggest,Php,Autocomplete,Search Engine,Autosuggest,如何在搜索框下方创建自动完成的建议列表：用户可以使用键盘向下和向上键在它们之间导航用户可以使用Esc按钮关闭建议列表当用户按下键盘向下或向上键时，选择的建议将填入搜索框中这是我目前为index.php编写的代码： <?php include 'script_suggestion.php'; include 'script_close_suggestion_box.php'; ?> <html> <head> <title&

如何在搜索框下方创建自动完成的建议列表：

用户可以使用键盘

向下

和

向上

键在它们之间导航

用户可以使用

Esc

按钮关闭建议列表

当用户按下键盘

向下

或

向上

键时，选择的建议将填入搜索框中

这是我目前为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>


布兰登的搜索引擎
#暗示{
边框：1px纯黑；
可见性：隐藏；
位置：绝对位置；
背景色：白色；
z指数：10；
}
#建议a{
字号：12号；
颜色：黑色；
文字装饰：无；
显示：块；
宽度：648px；
高度：自动；
文本对齐：左对齐；
填充：2px；
}
#建议a：悬停{
背景色：#dddddd；
宽度：644px；
填充：2px；
}
布兰登的搜索引擎
找不到您的站点
插入。

提前感谢。

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

如果您想通过存储在数据库中的PHP动态获取数据，您可能想使用

我已经尝试过了，但我不知道如何在我的代码中使用它。告诉我们您是如何尝试的，我们可以从there@Rob我已经给你我的建议代码了。你现在能帮我吗？

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