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格式返回我想要的数据。

但是，出于某种原因，它表示“未找到任何结果＆＃39;在页面上，即使有吗？

Answer 1

它被称为先行/自动完成。

Twitter Bootstrap 2.0（过时 - 3.0中不可用）＆amp; 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>

为此，您需要做的就是使用数据库中的条目填充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>

jQuery自动完成不显示结果

4 个答案: