javascript 类似百度的搜索

最新推荐文章于 2022-12-01 20:47:05 发布

iamjunjie

最新推荐文章于 2022-12-01 20:47:05 发布

阅读量858

点赞数

分类专栏： javascript html 文章标签： javascript 百度 function url 服务器 jquery

本文链接：https://blog.csdn.net/justflyhigh/article/details/7607670

版权

javascript 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

使用说明：

修改jQuery脚本库引用路径

　 var text=$("#txt");//文本框

var oldValue="";//记录文本框原始值

var ul=$("#result");//显示查询结果的ul

var url="http://192.168.1.101:9999/center.php/testc/get_data";//请求地址

配置这几个变量值

向后台发送请求的方式是post，后台接受的参数名param

ul.append("<li>"+obj.name+"</li>");//遍历返回的结果，把结果添加到ul中

修改obj.name的name值，改成是显示的对象属性即可

<html>
<head>
<title>javascript 类似百度搜素</title>

<style type="text/css">
        ul{
            border:1px solid red;
            width:150px;
            padding:0;
            margin:0;
            display:none;}
        ul li{
            padding:0;
            margin:0;
            line-height:22px;
            cursor:pointer;
        　 list-style:none;}
        </style>
        <script type="text/javascript" src="<?php echo base_url()?>application/views/css_scripts/scripts/jQuery/jquery-1.4.js"></script>
        <script type="text/javascript">

        $(function(){
            var text=$("#txt");//文本框
            var oldValue="";//记录文本框原始值
            var ul=$("#result");//显示查询结果的ul
            var url="http://192.168.1.101:9999/center.php/testc/get_data";//请求地址
            var index=0;//结果下标
            text.keydown(function(){
                oldValue=$(this).val();//每次按键把文本框的原始值记录下来
            }).keyup(function(e){
                try{
                      var newValue=$(this).val();//记录当前文本框的值
                      if(newValue==""){//如果当前文本框的值为空，把显示结果的ul清空、设置为不可见、并跳出方法
                        ul.empty();
                        ul.css('display','none');
                        return;
                    }
                    //判断当前文本框的值是否与原始值相同
                    if(newValue!=oldValue){
                        ul.empty();
                        ul.css('display','none');//请求前把原来的结果删除
                        //这里向服务器端发送请求
                        $.ajax({
                            url:url,
                            type:'post',
                            data:{param:newValue},
                            success:function(msg){
                                //服务器端返回的数据格式如：[{id:1,name:'王俊杰'},{id:2,name:'祈星月'},{id:3,name:'赵彬言'}]
                                msg=eval('('+msg+')');//把返回的数据转换成对象
                                if(msg.length>0){//判断是否有返回结果
                                    $.each(msg,function(index,obj){
                                    　　　//遍历返回的结果，把结果添加到ul中
        　　　　　　　　　　　ul.append("<li>"+obj.name+"</li>");
                                    });
                                    ul.find('li').click(function(){
                                            //为ul里的li绑定click事件　　　　　　　　
        　　　　　　　　　　 text.val($(this).text());
                                            ul.empty();
                                            ul.css('display','none');
                                    });
                                    ul.css('display','block');
                                }
                            }
                        });
                    }
                    var len=ul.find('li').length;
                    //键盘向下按键
                    if(e.keyCode==40 && len>0){
                        if(index>=len){
                            ul.find('li')[len-1].style.background="white";
                            index=0;
                        }
                        if(index-1>=0){
                            ul.find('li')[index-1].style.background="white";
                        }
                        ul.find('li')[index].style.background="blue";
                        text.val($(ul.find('li')[index]).text());
                        index++;
                    }
                }catch(e){}
            })
        })
        </script>
    </head>
    <body>
        <input id="txt" type="text"/>
        <ul id='result'>
        </ul>
    </body>
</html>

iamjunjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 类似百度的搜索

使用说明： application/views/css_scripts/scripts/jQuery/jquery-1.4.js">修改jQuery脚本库引用路径　 var text=$("#txt");//文本框 var oldValue="";//记录文本框原始值 var ul=$("#result");//显示查询结果的ul
复制链接

扫一扫

专栏目录