jQuery自动完成不显示结果答案

【问题标题】：jQuery Autocomplete not showing resultsjQuery自动完成不显示结果
【发布时间】：2014-11-29 14:04:42
【问题描述】：

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

例如，当您开始在 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 格式带回了我想要的数据。

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

【问题讨论】：

试试谷歌搜索：JQuery 自动完成。

标签： javascript php jquery html mysqli

【解决方案1】：

它被称为预先输入/自动完成。

Twitter Bootstrap 2.0（过时 - 在 3.0 中不可用）和 jQuery UI 可以满足您的需求。

【讨论】：

Twitter Bootstrap 没有那个了。
是的，你是对的，仅适用于 Bootstrap 2.0 - 我的错误 :)

【解决方案2】：

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

【讨论】：

这是一个产品搜索栏。所以我得到了所有名称如 $term 的产品。我不明白为什么这是个问题？
jQuery UI 自动完成正在您传递的数组内创建搜索。

【解决方案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'];
}
?>

如果这对您不起作用，请告诉我，我会进行更多编码。 :-) 祝你好运！

【讨论】：

【解决方案4】：

它有时是浏览器 UI 的一部分，它会自动为您填写过去输入的字段。有一个名为 datalist 的 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>

【讨论】：