基于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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
Javascript 入门基础学习
Mar 10 Javascript
Jquery 扩展方法
May 06 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
numpy数组拼接简单示例
2017/12/15 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
我的理想演讲稿
2014/04/30 职场文书
工作分析计划书
2014/04/30 职场文书
超越自我演讲稿
2014/05/21 职场文书
横幅标语大全
2014/06/17 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB