JQuery UI Autocomplete缓慢选择一个元素

Question

<script type="text/javascript">
$(function() {
$( "#customers" ).autocomplete({
source: 'search.php'
});
});
</script>
<div class="ui-widget"><input id="customers" name="Cno" placeholder="Customer Name"></div>

search.php中

<?php include('header.php');
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM customers WHERE Customer_Name LIKE '%".$searchTerm."%' ORDER BY Customer_Name ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['Customer_Name'];
}
//return json data
echo json_encode($data);
?>

对于某些数组，它没有正常工作，因为我在Jquery UI中描述的某些单词无法正常工作而且我添加了这段代码

$mysqli->set_charset('utf8mb4') 

然后我在从下拉列表中选择元素时遇到问题，将li类转换为ui-state-active需要太长时间，如何解决？

任何帮助都会很棒！

Answer 1

关于你的PHP，我建议：

PHP

<?php
  include('header.php');
  //get search term
  $searchTerm = $_GET['term'];
  $data = array();
  //get matched data from skills table
  $query = $db->prepare("SELECT * FROM customers WHERE Customer_Name LIKE '%?%' ORDER BY Customer_Name ASC");
  $query->bind_param('s', $searchTerm);
  $query->execute();
  $results = $query->get_result();
  while ($row = $results->fetch_assoc()) {
    $data[] = $row['Customer_Name'];
  }
  $query->close();
  $db->close();
  //return json data
  header('Content-Type: application/json');
  echo json_encode($data);
?>

这将有助于保护脚本免受SQL注入。

关于你的jQuery，我建议：

JavaScript的

$(function() {
  $("#customers").autocomplete({
    minLength: 3,
    source: 'search.php'
  });
});

如果输入'sim'，自动完成将通过GET将其发送到您的PHP。 响应将是这样的：

[
  "Bart Simpson",
  "Homer Simpson",
  "Lisa Simpson",
  "Maggie Simpson",
  "Marge Simpson"
]

在控制台中，您应该看到此活动并可以查看执行时间。 这将告诉您PHP花了多长时间来提供对请求的响应。 此数据应立即加载到自动完成中。

如果您看到缓慢，则必须确定它是否在您的PHP或JavaScript中。 这将决定在哪里寻找问题。