文本框中未显示预输入数据，并且在“网络"选项卡上未显示任何结果 [英] Typeahead data is not shown at the text box and no results at the network tab

问题描述

我正在使用jquery ui自动完成功能来编写脚本，但似乎无法正常工作，因此有人添加了一个脚本来使用typeahead.js库来帮助我，

I was working on a script using jquery ui autocomplete, but it seems not working, so someone add a script to help me using typeahead.js library, here is his answer:

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

我照原样添加了它，并将我的PHP脚本更改为:

I added it like it is and changed my PHP script to:

$cid = $_SESSION['clinic_id'];

$searchTxt = '%'.$_REQUEST['term'].'%';
$res = array();
$getPatients = "SELECT * FROM patient WHERE clinic_id = :cid and patient_name_en LIKE :searchTxt OR dob LIKE :searchTxt OR patient_id LIKE :searchTxt OR patient_phone LIKE :searchTxt OR unhcr_registration_number LIKE :searchTxt ORDER BY patient_id DESC";

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

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

echo json_encode($res);

我添加了库(我正在使用bootstrap 4，所以我为其下载了typeaheadjs.css库):

I added the libraries (I am using bootstrap 4 so I downloaded the typeaheadjs.css library for it):

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery-ui.css">
<link rel="stylesheet" href="../css/typeaheadjs.css">
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<script src="../js/typeahead.bundle.js"></script>

现在，当我在searchTxt文本框中键入内容时:在网络选项卡上我都看不到任何输出，在文本框中也看不到任何结果. (控制台上没有错误).

Now when I type in the searchTxt text box: I can't see any output at the network tab neither at the text box as results. (No errors at the console).

推荐答案

请参阅此演示#5

$('#demo5').typeahead({
    ajax: { 
            url: '/cities/list',
            triggerLength: 1 
          }
});

autocomplete.php应该返回如下的json数据格式

autocomplete.php should return json format of data as below

[
  {
    id: 1,
    name: 'John'
  },
  {
    id: 2,
    name: 'Alex'
  },
  {
    id: 3,
    name: 'Terry'
  }
]

演示链接

文档链接

Github 链接

希望你会得到它.

这篇关于文本框中未显示预输入数据，并且在“网络"选项卡上未显示任何结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！