jquery+ajax 实现搜索框提示

Posted 张三的美丽家园

tags:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #search_result{
            width:302px;
            position:absolute;
            left:618px;
            top:180px;
            z-index:1;
            overflow:hidden;
            background:#dcf6f8;
            border:#c5dadb 1px solid;
            border-top:none;
        }
        .line{
            font-size:12px;
            color:#000;
            background:#aed34f;
            width:302px;
            padding:2px;
        }
        .hover{
            background:#007ab8;
            color:#fff;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(function(){
        $(#search).keyup(function(){
            $.ajax{
                type:GET,
                url:include/ajax_search.php,//处理页面的url地址
                data:txt_search=+escape($(#search).val()),//要传递参数
                success:function(data){
                    if(data!=‘‘){
                        var ss;
                        ss=data.split("@");
                        var layer;
                        layer="<table>";
                        for(var i=0;i<ss.length-1;i++){
                            layer+="<tr><td class=‘line‘>"+ss[i]+"</td></tr>";
                        }
                        layer+="</table>"
                        $(#search_result).empty();
                        $(#search_result).append(layer);
                        $(.line:first).addClass(hover);
                        $(#search_result).css(display,‘‘);
                        $(.line).hover(function(){
                            $(.line).removeClass(hover);
                            $(this).addClass(hover);
                        },function(){
                            $(this).removeClass(hover);
                        });
                        $(.line).click(function(){
                            $(#search).val($(this).text());
                        })
                    }else{
                        $(#search_result).empty();
                        $(#search_result).css(display,none);
                    }

                },
                error(function() {
                    alert(O No~~~~);
                });
            }esle if(keyCode==38){
                $(#aa tr.hover).prev().addClass(hover);
                $(#aa tr.hover).next().removeClass(hover);
                $(#search).val($(#aa tr.hover).text());
            }else if(keyCode==40){
                $(#aa tr.hover).next().addClass(hover);
                $(#aa tr.hover).prev().removeClass(hover);
                $(#search).val($(#aa tr.hover).text());
            }
        });
    });
    $(document).ready(function(){
        $().click(function(){
            $(#search_result).empty();
            $(#search_result).css(display,none);
        });
    });
</script>
    
</body>
</html>

 

以上是关于jquery+ajax 实现搜索框提示的主要内容,如果未能解决你的问题,请参考以下文章

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

Jquery 搜索框自动提示

jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址

ajax+JQuery实现类似百度智能搜索框

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