jQuery自动完成显示空结果 [英] jQuery autocomplete is showing empty results

问题描述

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

I have this PHP script to get all patient name from my database:

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

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

And I have a text box where I want to display the patient_name as autocomplete using jquery-ui autocomplete library.

这是我的jQuery脚本：

Here is my jQuery script:

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

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

I can see that if a type a name at the network tab I can see a returned array:

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

But at the text box I see that the autocomplete are empty like in the following image:

和它显示2个白色方框而不是返回数组的白色方块

推荐答案

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

Twitter typeahead.js is the best option to implement this feature.

请使用 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

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

Let me know if you need any help.

这篇关于jQuery自动完成显示空结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！