基于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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
php中给js数组赋值方法
Mar 10 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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获取数组中重复数据的两种方法
2013/06/28 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
一段实时更新的时间代码
2006/07/07 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Python中有几个关键字
2020/06/04 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python 监控logcat关键字功能
2020/09/04 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
租房协议书范例
2014/10/14 职场文书
技术员岗位职责
2015/02/04 职场文书
庆祝教师节主持词
2015/07/06 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Python实现位图分割的效果
2021/11/20 Python