javascript - JQuery UI 自动完成选择元素速度缓慢

标签 javascript jquery performance jquery-ui jquery-ui-autocomplete

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

搜索.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 not working properly for some words 中所述,它无法正常工作。我添加了这段代码

$mysqli->set_charset('utf8mb4') 

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

任何帮助都会很棒!

最佳答案

关于您的 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 注入(inject)。

关于你的 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 中。这将决定在哪里寻找问题。

关于javascript - JQuery UI 自动完成选择元素速度缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41321242/

相关文章:

javascript - 如何同步两个不同页面上的按钮?

javascript - 使用 jquery 将 div 包裹在字符串周围

javascript - window.parent.location.href 不适用于 mac os 上的 safari

php - 返回一个在 WordPress 简码中包含变量的字符串

performance - 使用 Redis 跟踪在线用户的 2 种方法。哪个更快?

c - 双重编译 C 代码以减少执行时间

java - 如何提高大型文本文件的数据加载性能

javascript - 变量似乎没有更新其值

javascript - 如何在表td标签中的循环中显示 react 变量值

javascript - 为什么我的模态框没有在页面中弹出?