JQuery KeyUp实时搜索.如何? [英] JQuery KeyUp Live Search. How to?
本文介绍了JQuery KeyUp实时搜索.如何?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图找出为什么我可以进行实时搜索的原因，但是无论我键入什么，它都会从mysql表中返回所有结果.也许您可以帮忙?
I am trying to find out why is it that I can get my live search to work but it returns all results from mysql table no matter what I type. Perhaps you could help?
我正在尝试获取上一个请求，并在每次键入命令时都发起一个新请求.
I am trying to get the previous request and initiate a new one on each keyup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Help Tool 2.0</title>
<link type="text/css" rel="stylesheet" href="assets/css/index.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#search-box').keyup(function() {
$("#results").html('');
var xhr;
var keywords = $(this).val();
if(xhr != null) xhr.abort();
xhr = $.get("search.php", {q: keywords}, function() {
//alert("success");
})
.success(function(data) {
xhr = null;
//alert("second success");
$("#results").html(data);
})
});
});
</script>
<input id="search-box" name="q" type="text" />
<div id="results"></div>
</body>
</html>
和PHP:
<?php
include_once ('database_connection.php');
if(isset($_GET['q'])){
$keyword = trim($_GET['q']) ;
$keyword = mysqli_real_escape_string($dbc, $keyword);
$query = "select topictitle,topicdescription from topics where topictitle like '%$q%' or topicdescription like '%$q%'";
//echo $query;
$result = mysqli_query($dbc,$query);
if($result){
if(mysqli_affected_rows($dbc)!=0){
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo '<p> <b>'.$row['topictitle'].'</b> '.$row['topicdescription'].'</p>';
}
}else {
echo 'No Results for :"'.$_GET['q'].'"';
}
}
}else {
echo 'Parameter Missing';
}
?>
推荐答案
尝试使用此js代码代替已有的代码.我添加了延迟功能，以便脚本在用户停止键入后在发送请求之前等待指定的时间.这样可以防止大量请求发送到服务器.
Try this js code in place of what you have. I added the delay function so that the script waits a specified amount of time after the user stops typing before sending the request. This prevents a large amount of requests getting sent to the server.
<script type="text/javascript">
var delay = (function() {
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$("#search-box").keyup(
function () {
delay(function () {
var keyword = $("#search-box").val();
var URL = encodeURI("search.php?q=" + keyword);
$.ajax({
url: URL,
cache: false,
type: "GET",
success: function(response) {
$("#results").html(response);
}
});
}, 500);
}
);
</script>
这篇关于JQuery KeyUp实时搜索.如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
