[英]instant search not working
The code below was for instant search, such as google search. 以下代码用于即时搜索,例如Google搜索。
Note that I didn't include the connect to database function here. 请注意,这里没有包括“连接数据库”功能。 Coz I think the database username and password setting would be different to yours.So please create your own if you want to test it. Coz我认为数据库的用户名和密码设置会与您的不同。因此,如果要测试它,请创建自己的数据库。 The mysql is set with a table is called "objects", and it has one column named "name". mysql设置了一个表,该表称为“对象”,它具有一个名为“名称”的列。
whenever I type in anything, another new search box pop up, where I was expecting the search result. 每当我输入任何内容时,都会弹出另一个新的搜索框,在该位置我期望得到搜索结果。
Could anyone help PLEASE! 任何人都可以帮忙吗! I stuck on this for almost a day and need it working by tomorrow.. Thanks in advance!! 我坚持了将近一天,需要在明天之前工作。
<!-- display the search area -->
<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->
<center>
<form method="POST">
<input type="text" name="search" style="width:400px " placeholder="Search box" onkeydown="searchq();">
<input type="submit" value=">>">
<div id="output">
</div>
</form>
</center>
</html>
<?php
$output="";
if(isset($_POST["searchVal"])){
//get the search
$search=$_POST["searchVal"];
//sort the search
$search=preg_replace("#[^0-9a-z]#i","",$search);
//query the search
$query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
$count=mysqli_num_rows($query);
//sort the result
if($count==0){
$output="there was no search result";
}
else{
while($row=mysqli_fetch_assoc($query)){
$object_name=$row["name"];
$output.="<div>".$object_name."</div>";
}
}
}
?>
<!-- instant search function -->
<script type="text/javascript">
function searchq(){
// get the value
var searchTxt = $("input[name='search']").val();
// post the value
$.post("search.php",{searchVal: searchTxt},function(output){
$("#output").html(output);
});
}
</script>
You need to change onkeydown
event to onkeyup
event because onkeydown
event will not capture current key which is pressed in search result. 您需要将onkeydown
事件更改为onkeyup
事件,因为onkeydown
事件不会捕获搜索结果中按下的当前键。 I have modified your code as below which is working. 我已经修改了您的代码,如下所示。 Please try: 请试试:
HTML Code: HTML代码:
<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->
<center>
<form method="POST">
<input type="text" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();">
<input type="submit" value=">>">
<div id="output">
</div>
</form>
</center>
<!-- instant search function -->
<script type="text/javascript">
function searchq(){
// get the value
var searchTxt = $("input[name='search']").val();
// post the value
if(searchTxt != "")
{
$.post("search.php",{searchVal: searchTxt},function(output){
$("#output").html(output);
});
}
else
{
$("#output").html("");
}
}
</script>
</html>
PHP file (search.php) PHP文件(search.php)
<?php
print_r($_POST);
$output="";
if(isset($_POST["searchVal"])){
//get the search
$search=$_POST["searchVal"];
//sort the search
$search=preg_replace("#[^0-9a-z]#i","",$search);
//query the search
echo "<br/>SELECT * from objects WHERE name LIKE '%$search%'<br/>";
$query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
$count=mysqli_num_rows($query);
//sort the result
if($count==0){
$output="there was no search result";
}
else{
while($row=mysqli_fetch_assoc($query)){
$object_name=$row["name"];
$output.="<div>".$object_name."</div>";
}
}
echo $output;
}
?>
I am printing what is passed to search.php and query fired in db for debug purpose. 我正在打印传递给search.php的内容,并在db中触发查询以进行调试。 Please let me know if any further help required. 请让我知道是否需要其他帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.