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

Posted SmallCuteMonkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ajax+Jquery实现搜索框的历史记录提示功能相关的知识,希望对你有一定的参考价值。

  1. 键盘离开(keyUP事件)的时候进行进行相关的提示(也就是发送请求进行查询
  2. 用一个盒子进行封装历史记录。(平时的时候通过display:none进行隐藏)
  3. input的输入框需要通过一个id属性进行绑定,因为Jquery需要使用。
  4. 可以css设置一下你的鼠标放上去之后,你的历史记录背景颜色会变化
  5. 后端的数据库可以通过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实现搜索框的历史记录提示功能的主要内容,如果未能解决你的问题,请参考以下文章

搜索自动提示的简单模拟JQuery

使用jquery+ajax+php实现搜索框的功能

苹果笔记本如何清除百度搜索框中的历史记录?

如何使用 jquery mobile 和 ajax 实现浏览器历史记录和书签

jquery+ajax 实现搜索框提示

原生AJAX+jsp+servlet实现百度搜索框提示效果