jQuery Ajax实现简单的搜索框提示功能

72 阅读 0 评论 48 点赞

我是靠谱客的博主明亮夕阳，最近开发中收集的这篇文章主要介绍jQuery Ajax实现简单的搜索框提示功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html：

<DOCTTYPE!>
<html lang="en-us">
<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="javascript/index.js" type="text/javaScript"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  
</head>
<body>
	<div class="ss">
<form id="search_form">
	<input class="search_input" id="search_input" type="text" name="queryString">
</form>
</div>

<div class="suggest" id="search_suggest">
    <ul id="search_result">
	</ul>

</div>
</body>
</html>

css代码：

body{
	background-color: #660099;
}
form{
	float: left;
	background-color: #fff;
	position: relative;
	left: 10px;
	top: 10px;
}
.search_input{
	border: none;
	height: 25px;
	line-height: 25px;
	outline: none;
	width: 350px;
	vertical-align:bottom;
}

.ss{
	position: absolute;
	top: 200px;
	left: 300px;
}

.suggest{
	border-top: 0;
	width: 384px;
	background-color: #fff;
	display: none;
}
.suggest ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.suggest ul li{
	padding: 3px;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
	cursor: pointer;
}
.suggest ul li:hover{
	background-color: #E0E0E0;
}

javascript代码：

$(function(){
    $("#search_input").bind('keyup',function(){
            //$.ajax()远程获取json数据
	        $.ajax({
		    type: "POST",
		    url: "search.php",
		    //dataType: 'json',
		    data: {
		    	queryString: $("#search_input").val()
		    },
		    success: function(response,status,xhr){
                //处理返回的数据
               // var text = json_encode(response);
		    	arr=response.split(",");
		    	 var html="";
                for(var i=0;i<arr.length-1;i++){
                	html+='<li>'+arr[i]+'<li>'; 
				} 	
				$('#search_result').html(html);

				//显示返回的数据
				 $('#search_suggest').show().css({
                    position: 'absolute',
                    top: $('#search_form').offset().top + $('#search_input').height(),
                    left: $('#search_form').offset().left,
                    width: $('#search_input').width()
               });
		    	//alert(arr[]);
		    	//alert(response.length);
			    //suggest(response);
			},
			beforeSend: function(){
				console.log("即将发送ajax请求");
			},
			error: function(xhr,errorText,errorType){
				console.log(errorType+":"+errorType);
			}
		});	
			
			/*
               	$(document).bind('click',function(){
		$('#search_suggest').hide();
		});
               */
		});       

		

});

php代码：

<?php
 
header('Content-Type:text/html;charset=gb2312');//这句话必须加！！！ 
$queryString = $_POST['queryString']; 
$provinces=array("beijing","tianjin","shanghai","chongqing","hebei","henan","heilongjiang","jilin","changchun",  
    "shandong","anhui","shanxi","guangzhou","yunnan","hainan","xizang","qinghai","fujian","guizhou","jiangsu",  
    "zhejiang","guangzhou","yunan","hainan","xizang","neimenggu","sichuan","gansu","ningxia","xianggang","aomen");  
$ans="";
//$ans = array(); 
for($i=0;$i<31;$i++){  
    $tt=strpos($provinces[$i],$queryString);   
    if(strpos($provinces[$i],$queryString)!==false){
        $ans=($provinces[$i].",").$ans; 
        //$ans[]=$provinces[$i];  
    }  
} 
//$_callback = $_GET['callback'];
//return $_callback."($ans)";
//echo $ans; 
return $ans;
?>