基于jquery实现的自动补全功能


Posted in Javascript onMarch 12, 2015

本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下:

$(function() {

    // 自动补全

    var maxcount = 0;// 表示他最大的值

    var thisCount =0;// 初始化他框的位置

    $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");

    $("#sele").keyup(function(even) {

        var v = even.which;

        if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据

            {

            return;

            }

        var txt = $("#sele").val();//这里是取得他的输入框的值

        if (txt != "") {

            //拼装数据

            $.ajax({

                url : "Birthday_autoCompletion",//从后台取得json数据

                type : "post",

                dataType : "json",

                data : {"bir.userName" : txt

                },

                success : function(ls) {

                    var offset = $("#sele").offset();

                    $("#autoTxt").show();

                    $("#autoTxt").css("top", (offset.top + 30) + "px");

                    $("#autoTxt").css("left", offset.left + "px");

                    var Candidate = "";

                     maxcount = 0;//再重新得值

                    $.each(ls, function(k, v) {

                        Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";

                        maxcount++;

                    });

                    $("#autoTxt").html(Candidate);

                    $("#autoTxt li:eq(0)").css("background", "#A8A5A5");

                    //高亮对象

                    $('body').highLight();

                    $('body').highLight($("#sele").val());

                    event.preventDefault();

                        //当单击某个LI时反映

                        $("#autoTxt li").click(function(){

                            $("#sele").val($("#autoTxt li:eq("+this.id+")").text());

                            $("#autoTxt").html("");

                            $("#autoTxt").hide();

                        });

                        //移动对象

                        $("#autoTxt li").hover(function(){

                            $("#autoTxt li").css("background", "#FFFFFF");

                            $("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");

                            thisCount=this.id;},function(){

                                $("#autoTxt li").css("background", "#FFFFFF");});

                },

                error : function() {

                    $("#autoTxt").html("");

                    $("#autoTxt").hide();

                    maxcount = 0;

                }

            });

        } else {

            $("#autoTxt").hide();

            maxcount = 0;

            $("#sestart").click();

        }

    });

    //当单击BODY时则隐藏搜索值

    $("body").click(function(){

        $("#autoTxt").html("");

        $("#autoTxt").hide();

        thisCount=0;

    });

    // 写移动事件//上键38 下键40 确定键 13

    $("body").keyup(function(even) {

        var v = even.which;

            if (v == 38)// 按上键时

            {

                if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点

                    $("#sele").blur();

                    if(thisCount>0)

                        --thisCount;

                    else

                        thisCount=0;

                $("#autoTxt li").css("background", "#FFFFFF");

                $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");

                }else{$("#sele").focus();}

            } else if (v == 40) {// 按下键时

                if(thisCount<maxcount-1)

                {

                    $("#sele").blur();

                    ++thisCount;

                    $("#autoTxt li").css("background", "#FFFFFF");

                    $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");

                }

            } else if (v == 13) {// 按确认键时

                var tt=$("#"+thisCount).text();

                if(tt!="")

                    {

                        $("#sele").val(tt);

                        $("#autoTxt").html("");

                        $("#autoTxt").hide();

                    }else

                    {

                        if($("#sele").val()!="")

                        $("#sestart").click();

                    }

            } else {

                if($("#autoTxt").html()!="")

                    {

                        $("#sele").focus();

                        thisCount=0;

                    }

            }

    });

});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
Javascript 类型转换方法
Oct 24 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue实现在线翻译功能
Sep 27 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 #Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 #Javascript
You might like
php实现的通用图片处理类
2015/03/24 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
javascript基本语法分析说明
2008/06/15 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python之语音识别speech模块
2020/09/09 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
平面设计师的工作职责
2013/11/21 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
小学老师寄语大全
2014/04/04 职场文书
《荷花》教学反思
2014/04/16 职场文书
师德师风自查材料
2014/10/14 职场文书
2014年变电站工作总结
2014/12/19 职场文书
龙门石窟导游词
2015/02/02 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python