JQuery用户界面自动填充缓慢选择的元素
问题描述:
<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.phpJQuery用户界面自动填充缓慢选择的元素
<?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注入脚本。
在问候你的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中。这将决定在哪里寻找问题。
首先,您的PHP代码易受SQL注入攻击。当您查看您的JS控制台时,您是否看到GET请求是否异常长?您可能需要添加'minLength:3'来帮助减少返回的结果集。 – Twisty