Javascript jQuery自动完成不显示结果

我正在寻找一种方法，当用户开始在输入字段中键入内容时，它将开始在下拉列表中生成结果

例如，当你开始在谷歌或Facebook搜索栏中输入内容时

那到底叫什么

更新：

我决定使用jQuery自动完成

我有以下几点

<form action="" method="post">
  <input type="text" class="auto" name="search" autocomplete="off">
</form>

<script>
  $(document).ready(function($){
    $('.auto').autocomplete({
     source:'connect.php',
     minLength:1
    });
  });
</script>

现在，当我使用chrome工具检查响应时，它工作得非常好，它以JSON格式返回我想要的数据

---

然而，出于某种原因，它在页面上声明“未找到结果”，即使有？

它被称为typeahead/autocomplete

---

Twitter Bootstrap 2.0（过时-在3.0中不可用）和jQuery UI具备您所需的功能。

它有时是浏览器UI的一部分，它会自动使用过去的条目为您完成字段。有一个名为HTML5的元素，您可以将该元素绑定到输入字段的列表属性中，以获得相同的结果

<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
</datalist>

从此列表中选择浏览器：

为此，您只需使用数据库中的条目填充datalist的选项值。像这样的东西会有用的

<?php
    $pdo = new POD('mysql:host=localhost;dbname=test', 'username', 'password', [PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8']);
    $sth = $pdo->prepare("SELECT id, value FROM browsers");
    $rows = $sth->execute()->fetchAll();
?>
    <div>Choose a browser from this list:</div>
    <input list="browsers" />
    <datalist id="browsers">
<?  foreach ($rows as $row):    ?>
        <option value="<?=$row['value']?>">
<?  endforeach; ?>
    </datalist>

从以下列表中选择浏览器：
您需要从数据库中获取所有记录并返回它们。
我建议向服务器发出ajax请求（php脚本）。首先，搜索文本框需要一个
oninput
事件处理程序。php脚本将返回所需的记录。这是我的密码：

<input type="text" id="searchBox" oninput="searchTheDatabase(this.value)" value="let us search it'>
<div id="results"></div>

Twitter Bootstrap不再有这种功能了。是的，你是对的，只适用于Bootstrap 2.0-我的错误：）试试谷歌搜索：JQuery autocomplete。它是一个产品搜索栏。所以我得到的所有产品的名称像$term。我不明白为什么会有问题？jQuery UI autocomplete正在传递的数组中创建搜索。
<input type="text" id="searchBox" oninput="searchTheDatabase(this.value)" value="let us search it'>
<div id="results"></div>

<script type="text/javascript">
    function searchTheDatabase(searchText)
    {
       $.post( "search.php", { searchText:searchText})
  .done(function( data ) {
    $("#results").html(data);
  });
    }
    </script>

<?php
//put your connection code here
$searchText = mysql_real_string_escape($_POST['searchText']);
$searchTextLength = strlen($searchText);
$query = "select * from products where";
//I'm not sure how you search for only the first so many characters, but you can use $searchTextLength to help you
$result = mysql_query($query, $connect);
while($row = mysql_fetch_array($result))
{
  echo $row['name'];
}
?>