让input框实现类似百度的搜索提示(基于jquery事件监听)


Posted in Javascript onJanuary 31, 2014

挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求,发现还真找不到。于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装。

需求:
实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择

思路:
框架一贯思路,通过class作为监听入口,通过data作为数据传递;
通过监听input和propertychange事件实现实时的改动监听,input是主流,propertychange是ie,你懂的;
通过ajax实现post动作,把返回内容显示成类似选框的形式;
监听键盘的上键(38)、下键(40)、回车键(13),通过绑定keydown,判断event.keycode实现;
监听鼠标的mouseover和click事件,与键盘动作要完美结合;
若input内容要求与已知选项必须一致,则监听blur事件,判断是否允许换焦点;

实现代码:

//By COoL //定义全局变量用于储存提示层 
var liketips; 
//监听改动或得到焦点事件 
//禁用chrome和firefox浏览器自带的自动提示 
$('.getsearchjson').attr("autocomplete","off"); 
$('.getsearchjson').bind("propertychange input focus",function(event){ 
    $this=$(this); 
    if(event.type!='focus'){ 
        //如果有改变,则状态定为必须重新选择,因为纯人手输入会导致value无法插入 
        $this.data('ok',false); 
    } 
    //获取input框位置并计算提示层应出现的位置 
    var top=1*$this.offset().top+25; 
    var left=1*$this.offset().left; 
    var width=1*$this.width()+12; 
    //重建储存提示层并让其在适当位置显示 
    $(liketips).remove(); 
    liketips=document.createElement('div'); 
    $liketips=$(liketips); 
    //class样式这里不提供,最主要是position:absolute 
    $liketips.addClass("liketips"); 
    $liketips.css({top:top+'px',left:left+'px',width:width+'px'}); 
    //加载前先显示loading动态图 
    $liketips.append('<img src="/images/loading.gif" border="0" />'); 
    $liketips.appendTo($this.parent()); 
    $liketips.show(); 
    //定义ajax去获取json,type参数通过data-type设置,keyword则是目前已输入的值 
    //返回值以table形式展示 
    $.post('/data/search.do',{type:$this.data('type'),keyword:$this.val()},function(json){ 
        $liketips.empty(); 
        var htmlcode="<table cellspacing='0' cellpadding='2'><tbody>"; 
        for(var i=0;i<json.datas.length;i++){ 
            //这里我需要用到value和title两项,所以用data-value传递多一个参数,在回车或鼠标点击后赋值到相应的地方,以此完美地替代select 
            htmlcode+='<tr data-value="'+json.datas[i][0]+'"><td>'+json.datas[i][1]+'</td></tr>'; 
        } 
        htmlcode+="</tbody></table><span>请务必在此下拉框中选择</span>"; 
        //把loading动态图替换成内容 
        $liketips.html(htmlcode); 
    },"json"); 
}); 
//焦点消失时确保数据来自选项,隐藏提示框体 
$('.getsearchjson').blur(function(){ 
    //因为鼠标点击时blur动作结算在click之前,setTimeout是为了解决这个问题 
    $oldthis=$(this); 
    setTimeout(function(){ 
        if($oldthis.data('ok')) 
            $(liketips).fadeOut('fast'); 
        else{ 
            alert('为保证数据准确性,请务必在下拉提示中选择一项,谢谢合作'); 
            $oldthis.focus(); 
        } 
    },200); 
}); 
//监听键盘动作 
$('.getsearchjson').keydown(function(event){ 
    //console.log(event.keyCode); 
    $this=$(this); 
    if(event.keyCode==40){ 
        //按键是向下 
        $nowtr=$('tr.selectedtr'); 
        //如果已存在选中,则向下,否则,选中选单中第一个 
        if($nowtr.length>0){ 
            $nexttr=$nowtr.next('tr') 
            //如果不是最后选项,向下个tr移动,否则跳到第一个tr 
            if($nexttr.length>0){ 
                $('tr.selectedtr').removeClass(); 
                $nexttr.addClass('selectedtr'); 
            } 
            else{ 
                $('tr.selectedtr').removeClass(); 
                $nowtr.parent().find('tr:first').addClass('selectedtr'); 
            } 
        } 
        else{ 
            $('.liketips').find('tr:first').addClass('selectedtr'); 
        } 
    } 
    else if(event.keyCode==38){ 
        //按键是向上 
        $nowtr=$('tr.selectedtr'); 
        //如果已存在选中,则向下,否则,选中选单中第一个 
        if($nowtr.length>0){ 
            $prevtr=$nowtr.prev('tr') 
            //如果不是最后选项,向下个tr移动,否则跳到第一个tr 
            if($prevtr.length>0){ 
                $('tr.selectedtr').removeClass(); 
                $prevtr.addClass('selectedtr'); 
            } 
            else{ 
                $('tr.selectedtr').removeClass(); 
                $nowtr.parent().find('tr:last').addClass('selectedtr'); 
            } 
        } 
        else{ 
            $('.liketips').find('tr:last').addClass('selectedtr'); 
        } 
    } 
    else if(event.keyCode==13){ 
        //按键是回车,则确定返回并隐藏选框 
        $nowtr=$('tr.selectedtr'); 
        if($nowtr.length==1){ 
            //设置value值到input框通过参数data-valueto配置的value值存储项中去,一般是hidden项 
            $valuefield=$('input[name='+$this.data('valueto')+']'); 
            $valuefield.val($nowtr.data('value')); 
            $this.val($nowtr.text()); 
            //设置状态是从选项中选择,允许blur 
            $this.data('ok',true); 
        } 
        $(liketips).fadeOut('fast'); 
        return false; 
    } 
    //console.log(event.keyCode); 
    return true; 
}); 
//监听鼠标动作,mouseover改变选中项 
$(document).delegate('.liketips td','mouseover',function(){ 
    $nowtr=$(this).parent(); 
    $nowtr.siblings('tr').removeClass(); 
    $nowtr.addClass('selectedtr'); 
}); 
//监听鼠标动作,click选定 
$(document).delegate('.liketips td','click',function(){ 
    $nowtr=$(this).parent(); 
    if($nowtr.length==1){ 
        //取得该提示层对应的input框 
        $inputfield=$nowtr.parent().parent().parent().siblings('input.getsearchjson'); 
        //设置value值到input框通过参数data-valueto配置的value值存储项中去,一般是hidden项 
        $valuefield=$('input[name='+$inputfield.data('valueto')+']'); 
        $valuefield.val($nowtr.data('value')); 
        $inputfield.val($nowtr.text()); 
        //设置状态是从选项中选择,允许blur 
        $inputfield.data('ok',true); 
    } 
    $(liketips).fadeOut('fast'); 
});

CSS这里就不放出了,我的实现效果如下:

让input框实现类似百度的搜索提示(基于jquery事件监听)

//禁用chrome和firefox浏览器自带的自动提示 
$this.attr("autocomplete","off");
Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 #Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 #Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 #Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 #Javascript
js跳转页面方法总结
Jan 29 #Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php中Snoopy类用法实例
2015/06/19 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
js replace正则表达式应用案例讲解
2013/01/17 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python实现命令行通讯录实例教程
2016/08/18 Python
Python从零开始创建区块链
2018/03/06 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
甲乙双方合作协议书
2014/10/13 职场文书
公司放假通知范文
2015/04/14 职场文书
汉字听写大会观后感
2015/06/12 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Python中相见恨晚的技巧
2021/04/13 Python