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>
时间: 2024-10-27 18:23:56

jquery+ajax 实现搜索框提示的相关文章

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实现 初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面.异步和同步:同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必

“百度搜索框提示”代码

使用方法: 百度提供了2种自定义调用的方法方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″>当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作:当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作.       第二步      在网页中引入Javascript文件: <script charset=

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

百度搜索框提示

方法一: 第一步 为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″> 当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作: 当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作. 第二步 在网页中引入Javascript文件:<script charset=”gbk” src=”http://www.baidu.co

7款基于jquery的动画搜索框

无论是电商网站,还是媒体网,还是个人博客,每个网站都有属于自己个性化的搜索框.今天小编给大家带来7款基于jquery的动画搜索框.每个搜索框都采用了动画效果,一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> CSS Animated Search Boxes</h1> <p> (with occasional help from javascript to assign focus)</p> <div class=&q

Jquery+Ajax下拉框级联查询

Jquery代码 <script type="text/javascript">          $(function(){ //提交事件           $("#ImageButton1").click(function(){ //省Id        var provinceId=$("#selProvince").val(); //市Id        var cityId=$("#selCity").

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

我们这里使用HTML5的新特性datalist实现输入框的自动下拉提示,用datalist通过id与input关联起来,在搜索时就会出现下拉框.下面是HTML代码. <!-- 输入框 --> <input type="text" size="50" id="search" name="search" list="browser" onkeyup="search()" o

css3 jQuery实现3d搜索框+为空判断

<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> body{background: #eee; font: 12px 'Lucida sans', Arial, Helvetica; color: #333; text-align: center;} a{color: #2A679F;} .form-wrapper{width: 450px; paddin