制作一个类似于百度搜索的事件代码

Posted 屈震

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了制作一个类似于百度搜索的事件代码相关的知识,希望对你有一定的参考价值。

 下面这页代码是我制作的一个简单的类似于百度主页搜索的事件。

 主要事件是在文本框上输入关键字,下面会有一个div显示出来你模糊关键字的数据。

并且点击下面的数据,数据会直接跳到文本框中。

还有鼠标放上变色的一个小事件。

有兴趣的可以看一下。

<script src="jquery-1.11.2.min.js">
</script>
<style type="text/css">
*{ margin:0px; auto; padding:0px;}
#xianshi{ margin-top:30px; width:300px; margin-left:500px;}
#txt{ width:300px;}
#list{ width:300px; height:100px; position:absolute;}
#name{ width:295px; height:30px;}
.sj{width:300px; border:1px solid #000; background-color:#FFF;}
.sj:hover{cursor:pointer}
#fg{ margin-top:50px;}
</style>
<body>
//做一个div 用于锁定样式
<div id="xianshi">
//做一个div,里面套一个输入关键字的文本框 
    <div id="txt">
    //做一个文本框,设置id为name.
    <input type="text" id="name" />
    </div>
    做一个div,存放输入关键字后的搜索到的信息
    <div id="list"></div>
</div>
<hr id="fg" />
<table border="1" width="100%" cellpadding="0" cellpadding="0" id="td">

</table>
</body>
//开始编写jq特效
<script type="text/javascript">
$(document).ready(function(e) {
    //在id为name的文本框上加一个输入事件
    $("#name").keyup(function(){
        Xianshi();
        //取出文本框中的值,用key接收
        var key = $(this).val();
        //输入ajax
        $.ajax({
            async:false,
            url:"xianshichuli.php",
            data:{key:key,bs:0},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                if(data.trim()=="")
                {
                    
                }
                else
                {
                    //把传入的数组拆分成字符串
                var shuju = data.trim().split("|");
                var str = "";
                //循环这个数组
                for(var i = 0; i<shuju.length;i++)
                {
                    shuju[i];
                    str = str+"<div class = ‘sj‘>"+shuju[i]+"</div>"//把循环出来的字符串放入div里
                }
                $("#list").html(str);//把取出来的值放入list div里。
                $("#list").css("display","block")
            }
            }
            });
                            $(".sj").mouseover(function(){  //加入一个sj的鼠标放上事件
                
                    $("#sj").css("background-color","white");
                    $(this).css("background-color","#FC0");    //鼠标放上改变背景颜色
                    })    
                    
                    $(".sj").mouseout(function(){
                
                    $(this).css("background-color","white");    //鼠标移出返回原来的字体颜色
                    })    
            
            $(".sj").click(function(){ //加入一个sj的点击事件
                
                var text = $(this).text();//取出sj里的值, 用text接收。
                $("#name").val(text);//把取出的值放入name文本框里。
                $("#list").css("display","none")
                
                })        
            Xianshi();
        })
        

});
function Xianshi()
{
    var key = $("#name").val();
    $.ajax({
        
        url:"xianshichuli.php",
        data:{key:key,bs:1},
        type:"POST",
        dataType:"TEXT",
        success: function(data)
        {
            var hang = data.trim().split("|")
            
            var str = "<tr><td>汽车名称</td><td>型号</td><td>发布时间</td><td>油耗</td><td>汽车价格</td></tr>";
            for(var i=0; i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str = str +"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>";
            }
            
            $("#td").html(str);
        }
        
        })    
}
</script>

 

以上是关于制作一个类似于百度搜索的事件代码的主要内容,如果未能解决你的问题,请参考以下文章

java代码如何在百度输入关键字查询,再提取搜索结果呢?

如何制作一个必应(百度)搜索框?

为啥此代码片段返回意外结果?

怎么用js写一个类似于百度输入框的搜索插件

如何制作一个必应(百度)搜索框?

SolrSolr实现简单的类似百度搜索高亮功能-2代码