使用ajax+Jquery实现搜索框的历史记录提示功能

当键盘离开(keyUP事件)的时候进行进行相关的提示（也就是发送请求进行查询）
用一个盒子进行封装历史记录。（平时的时候通过display:none进行隐藏）
input的输入框需要通过一个id属性进行绑定，因为Jquery需要使用。
可以css设置一下你的鼠标放上去之后，你的历史记录背景颜色会变化
后端的数据库可以通过list集合，或者map集合进行模拟。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度下拉框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>
<script type="text/javascript">

//页面加载完成就执行的代码块
$(function(){
      
      
    // alert("134");

    $("#content").keyup(function(){
      
      
    //向服务器发送请求
    $.ajax({
      
      
        // $("")

        url:"search",//请求的地址
        type:"post",//请求的路径
        dataType:"text",// 请求服务器应该回来的数据类型
        data:{
      
      "name":this.value},
        success:function(res){
      
      
            // 表示没有查询到数据
            if(res==" "){
      
      

                return;


            }
            //获取结果并通过分割字符串进行显示
            var cons=d.split(",");

            // 声明变量
            var divs=" ";

            for(var i=0;i<cons.length;i++){
      
      

            divs+="<div οnclick='writeContent(this)'  οnmοuseοver='changeBgColor(this)' οnmοuseοut='trunBgColor(this)'>"+cons[i]+"</div>";
            }

            // 将拼接的html代码块显示在查询的结果中
            tips.html(divs);

            //将盒子设置显示
            tips.css("display","block");

},
        error:function(){
      
      


            alert("你的请求失败了");
        }
    });



    });
    
     

    function trunBgColor(div){
      
      
        div.style.background="red";


    }

    function changeBgColor(div){
      
      
        div.style.background="blue";


    }
    function writeContent(div){
      
      
        //将div数据进行相关的显示

       var c=div.innerHTML;

       $("#content").val(c);
       div.parentNode.style.display="none";


}




})
//   模拟数据库的查询请求

//  String name=request.getParameter("name"); 
//  List<String> list=new ArrayList<String>();   
//  list.add("m1"); list.add("m2"); list.add("m3"); list.add("jack1"); list.add("jack2"); list.add("jack3");   String info="";
//  if(name.startWith("m")) fori list    if i>0   info+=",";   info+=list.get(i);     


</script>

<body>

    <form action="" method="get" onmouseover=" " onmouseout="">
        <div class="divSearch">
 <input type="text" name="name" id="content">
 <input type="submit" value="搜索">


    </div>
    
   
</form>

<div class="tips" style="display:none;width: 200px; height: 200px;border: gray solid 1px;">




</div>



<script type="text/javascript " src="static/js/quick_links.js "></script>
<script src="static/js/cookie_utils.js"></script>
<script src="static/js/vue.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/utils.js"></script>


 </body> 

</html>

使用ajax+Jquery实现搜索框的历史记录提示功能

猜你喜欢