jQuery自动完成不显示结果

Question

我正在寻找一种实现方法，以便当用户开始在输入字段中键入内容时，它将在下拉菜单中开始生成结果。

例如，当您开始输入Google或Facebook搜索栏时。

这到底叫什么？

更新：

我决定使用jQuery AutoComplete。

我有以下

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

和connect.php我知道我必须先清理$ term，然后才能将其输入到查询中。

if(isset($_GET['term'])) {
  require "db.php";

  $con = mysqli_connect("$host","$user","$password","$db");

  if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

  $term = $_GET['term'];
  $query = "SELECT `name` FROM `products` WHERE `name` LIKE '%$term%'";
  $result = mysqli_query($con, $query);

  while ($row = mysqli_fetch_array($result)) {
    echo json_encode($row);
  }
}

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

但是，由于某种原因，即使在页面上仍显示“未找到结果”？

Answer 1

这称为预输入/自动完成。

Twitter Bootstrap 2.0（已过时-在3.0中不可用）和jQuery UI具有您的要求。

Answer 2

您需要从数据库中获取所有记录并返回它们。

Answer 3

我建议向服务器发出ajax请求（php脚本）。 首先，您需要一个oninput事件处理程序用于搜索的文本框。 php脚本将返回您想要的记录。 这是我的代码：

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

Javascript：

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

PHP：

<?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'];
}
?>

让我知道这是否对您不起作用，我将做更多的编码。 ：-） 祝好运！

Answer 4

有时，它是浏览器用户界面的一部分，在浏览器中，它会自动使用过去的条目为您填写字段。 有一个称为datalist的HTML5元素，您可以将该元素绑定到输入字段的list属性中，以得到相同的结果

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

为此，您所需要做的就是用数据库中的条目填充数据列表的选项值。 这样的事情会工作...

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