How to implement search bar with AJax

This time I will show you how to implement the search bar with AJax. What are the precautions for implementing the search bar with AJax? The following is a practical case, let's take a look.

During the internship, I needed to use the asynchronous submission function, so I tried to understand ajax. I instantly felt that what I had learned before was really a drop in the bucket. It is true. If you do web application development, if you don’t know jquery and ajax, then It was really a waste of time. After understanding it, I felt that all the fancy functions on the Internet can be realized.

Without further ado, here is the ajax function to implement a simple Baidu search bar. When the user types characters in the input box above, the function "showHint()" will be executed. This function is triggered by the "onkeyup" event:

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementByIdx_x("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

Source code explanation:

If the input box is empty (str.length==0), then this function is cleared txtHint The content of the placeholder and exits the function.

If the input box is not empty, the showHint() function performs the following tasks:

Creates an XMLHttpRequest object

Execute the function when the server response is ready

Request a file sent to the server

Please note that we added a parameter q (with the content of the input box) to the URL

The requested file is written in php, of course what to use All are OK, there is no essential difference from ordinary pages:

<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//获得来自 URL 的 q 参数
$q=$_GET["q"];
//如果 q 大于 0，则查找数组中的所有提示
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How Ajax reads txt and displays its content in pages

Ajax traverses jSon for data Modification and deletion

The above is the detailed content of How to implement search bar with AJax. For more information, please follow other related articles on the PHP Chinese website!