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

【问题标题】：jQuery autocomplete is showing empty resultsjQuery自动完成显示空结果
【发布时间】：2017-07-06 05:31:31
【问题描述】：

我有这个 PHP 脚本可以从我的数据库中获取所有患者姓名：

<?php

error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once('connection.php');
header("Content-type:application/json");
$cid = $_SESSION['clinic_id'];

$res = array();
$getPatients = "SELECT * FROM patient WHERE clinic_id = :cid  ORDER BY patient_id DESC";

$execGetPatients = $conn->prepare($getPatients);
$execGetPatients->bindValue(':cid', $cid);
$execGetPatients->execute();
$getPatientsResult = $execGetPatients->fetchAll();

$i = 0;
foreach($getPatientsResult as $result)
{
    $res[$i] = $result;
    $i++;
}

echo json_encode($res);
?>

我有一个文本框，我想在其中使用 jquery-ui 自动完成库将 patient_name 显示为自动完成。

这是我的 jQuery 脚本：

  $(document).ready(function()
  {
    $( "#searchTxt" ).autocomplete({
      source: "../php/autoComplete.php"
    });
  })

我可以看到，如果在网络选项卡上键入名称，我可以看到返回的数组：

但在文本框中，我看到自动完成是空的，如下图所示：

它显示 2 个白框，而不是返回数组中的一个

【问题讨论】：

您必须使用 JQuery.parseJSON() 解析 json 数组，然后将每个结果设置为自动完成表单，它可以是一个可以从解析的 json 数据构建的数组。
我不知道你是什么意思
你能试试我在pastebin发的内容吗
我是说您将整个 json 数组提供给自动完成的源代码，这将无法正常工作，因此您必须编写代码来解析 json 数据，然后将源代码提供给自动完成输入。 .这样做有意义吗..
看到这篇文章link

标签： php jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

对于这种结果来说，这是一个不错的插件：https://twitter.github.io/typeahead.js/

【讨论】：

我现在一定会尝试的

【解决方案2】：

我认为是因为您传递的数据，似乎有多个列，您需要指定label 和value 或者它应该是简单的数组（根据您的代码应该是这种数据）喜欢

var availableTags = [
  "ActionScript",
  "COBOL",
  "ColdFusion",

];

您可以查看更多关于custom field passing的信息

【讨论】：

【解决方案3】：

Twitter typeahead.js 是实现此功能的最佳选择。

请通过PHP、AJAX 和TypeAhead.js 来实现它

<script>
$(function() {
  $("#searchTxt").typeahead({
    source: function(query, process) {
      var textVal=$("#searchTxt").val();
      $.ajax({
        url: '/php/autoComplete.php', // Please add full URL here
        type: 'POST',
        data: 'term=' + textVal,
        dataType: 'JSON',
        async: true,
        success: function(data) {
          process(data);
          console.log(textVal);
        }
      });
    }
  });
});
</script>

链接到TypeAhead.js

如果您需要任何帮助，请告诉我。

【讨论】：

我添加了typeahead 库并使用正确的网址添加了您的脚本，但什么都看不到
仍然是相同的 PHP 脚本，但我将一行更改为：$searchTxt = '%'.$_POST['term'].'%';
查看此链接stackoverflow.com/questions/44941988/…
OK 让我检查给定的链接
在@droidnation 那里添加了答案

【解决方案4】：

因为你需要在你的 json 数组中归档标签和值，所以你的 sql 会是，

$getPatients = "SELECT *, name as label, id as value FROM patient WHERE clinic_id = :cid  ORDER BY patient_id DESC";

【讨论】：