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

Myth丶恋晨 2022-07-14 03:38 200阅读 0赞

**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;
    ?>