JQuery+AJAX实现搜索文本框的输入提示功能

时间：2021-08-23 15:48:53

平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母，下面马上会弹出一个相关信息的内容框可供选择。感觉这个功能有较好的用户体验，所以也想在自己的网站上加上这种输入提示框。

实现的原理其实很简单，在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，处理页面接收到值后进行模糊匹配查询，然后将结果返回，输入页收到返回的数据后在处理，并生成相应的页面显示在页面上。这样整个流程就结束了。如图：

输入页可以使用keyup事件接收输入的值并发送到处理页。具体代码如下：

JQuery+AJAX实现搜索文本框的输入提示功能

输入页的代码如下：

//对输入提示框的CSS设置

<style>

#searchresult{width:302px; position:absolute; left:618px; top:180px;

z-index:; overflow:hidden; background:#dcf6f8; border:#c5dadb 1px solid;

border-top:none; .line{font-size:12px; color:#; background:#aed34f; width:302px; padding:2px;}

.hover{background:#007ab8; color:#fff;}

</style>
//JQuery代码，别忘了要先引用JQuery的库文件哦。

<script type="text/javascript" src="/js/jquery-1.3.pack.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#search').keyup(function(event){
if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105) || (event.keyCode>=65 && event.keyCode<=90) || event.keyCode==8){
$.ajax({
type:"GET",
url:"/include/ajax_search.php",
data:"txt_search="+escape($('#search').val()),
success:function(data){
if(data != ""){
var ss;
ss = data.split("@");
var layer;
layer = "<table id='aa'>";
for(var i=0;i<ss.length-1;i++){
layer += "<tr class='line'><td class='std'>"+ss[i]+"</td></tr>";
}
layer += "</table>";
$('#searchresult').empty();
$('#searchresult').append(layer);
$('.line:first').addClass("hover");
$('#searchresult').css("display","");

$('.line').hover(function(){
$('.line').removeClass("hover");
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
$('.line').click(function(){
$('#search').val($(this).text());
});
}else{
$('#searchresult').empty();
$('#searchresult').css("display","none");
}
},
error:function(){alert("O No~~~");}
});
}
else if(event.keyCode == 38){
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#search').val($('#aa tr.hover').text());
}else if(event.keyCode == 40){
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#search').val($('#aa tr.hover').text());
}
});
});



$(document).ready(function(){
	 $().click(function(){
	  $('#searchresult').empty();
	  $('#searchresult').css("display","none");
	 });
	});


 




处理页的代码如下：




<?php

require_once 'config.php';

$conn = mysql_connect($DBHost,$DBUser,$DBPwd);

mysql_select_db($DBName,$conn);

$result = $_GET["txt_search"];

if($result != ""){

$sql = "SELECT ProductName FROM Product WHERE ProductName LIKE '%{$result}%' LIMIT 10";

$query = mysql_query($sql,$conn) or die(mysql_error());

$num = mysql_num_rows($query);

if($num>){

   $str = "";

   while($row = mysql_fetch_array($query)){

    $str .= $row["ProductName"]."@";    echo $str;

}else{

   echo ""; }else{

echo ""; ?>




通过AJAX的异步传输处理就可以实现提示功能了！


//=================================//
下面再改进加了上下光标键的事件。


其他的代码都没有变动，就是在原先的基础上添加了几行。JQuery真的是很强大！


更新代码如下：




<script type="text/javascript" src="/js/jquery-1.3.pack.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#search').keyup(function(event){

if((event.keyCode>= && event.keyCode<=) || (event.keyCode>= && event.keyCode<=) || (event.keyCode>= && event.keyCode<=) || event.keyCode==){

$.ajax({

   type:"GET",    data:"txt_search="+escape($('#search').val()),

   success:function(data){

   if(data != ""){

    var ss;

    ss = data.split("@");

    var layer;

    layer = "<table id='aa'>";

    for(var i=;i<ss.length-;i++){

     layer += "<tr class='line'><td class='std'>"+ss[i]+"</td></tr>";     layer += "</table>";

    $('#searchresult').empty();

    $('#searchresult').append(layer);

    $('.line:first').addClass("hover");

    $('#searchresult').css("display","");     $('.line').hover(function(){

     $('.line').removeClass("hover");

     $(this).addClass("hover");

    },function(){

     $(this).removeClass("hover");     $('.line').click(function(){

     $('#search').val($(this).text());    }else{

    $('#searchresult').empty();

    $('#searchresult').css("display","none");    },

   error:function(){alert("O No~~~");} }

else if(event.keyCode == ){

$('#aa tr.hover').prev().addClass("hover");

$('#aa tr.hover').next().removeClass("hover");

$('#search').val($('#aa tr.hover').text());

}else if(event.keyCode == ){

$('#aa tr.hover').next().addClass("hover");

$('#aa tr.hover').prev().removeClass("hover");

$('#search').val($('#aa tr.hover').text()); });

});

$(document).ready(function(){

$().click(function(){

$('#searchresult').empty();

$('#searchresult').css("display","none"); });

</script>




PS: 键盘监听事件里面的event必须作为参数传递进去，所以要写成$('#search').keyup(function(event){...});而在IE浏览器下可以留空，如$('#search').keyup(function(){...}); 因为在IE下，event属于全局变量，是window.event，所以可以不用传递进去。


PS:上述代码还有一个问题没有解决，就是当浏览器窗体大小改变的时候，提示框并不会自适应的跟着改变位置，也就是说会错位。那是因为提示框使用是绝对定位，而且一开始的时候就把Left和Top属性给定死了，所以一旦窗体大小改变，提示框自然就不在搜索输入框的正下方了。解决的方法是动态的获取准确坐标，然后只要窗体大小改变就触发这个事件来动态的重新给定Left和Top的值。增加一个更改坐标的函数如下：




function ChangeCoords(){

var left = $('#search')[].offsetLeft;//获取距离最左端的距离，像素，整型

var top = $('#search')[].offsetTop+;//获取距离最顶端的距离，像素，整型（26为搜索输入框的高度）

$('#searchresult').css("left",left+"px");//重新定义CSS属性

$('#searchresult').css("top",top+"px");//同上

}




窗体的大小改变会触发resize()事件，只需在该事件内调用ChangeCoords()方法即可。




  $(window).resize(ChangeCoords);




另外在顶部的CSS设置中需要将Left:616px; Top:180px;先去掉。然后在键盘监听事件里也加一行调用ChangeCoords()；


因为刚加载完毕时$('#searchresult')这个DIV的CSS属性里已经没有Left和Top的属性了，所以第一次弹出提示框肯定会错位，也就是每次触发keyup事件也需要重新定义坐标。
相关文章