Question

我正在使用jquery ui autocomplete处理脚本，但它似乎无法正常工作，所以有人添加了一个脚本来帮助我使用typeahead.js库，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脚本更改为：

$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库：

<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文本框时：我无法在文本框中看到网络选项卡上的任何输出结果。（控制台没有错误。）

Answer 1

请参阅此演示＃5

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

autocomplete.php应返回json格式的数据，如下所示

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

演示link

文档link

Github Link

希望你能得到它。

预先输入的数据不会显示在文本框中，也不会显示在网络选项卡上

1 个答案: