基于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实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
AngularJS手动表单验证
Feb 01 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
js+css3实现旋转效果
Jan 20 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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/02/18 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP异常处理浅析
2015/05/12 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python列表推导式操作解析
2019/11/26 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python新手学习raise用法
2020/06/03 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
大专生的学习自我评价
2013/12/04 职场文书
信访工作者先进事迹
2014/01/17 职场文书
带薪年假请假条
2014/02/04 职场文书
个人贷款承诺书
2014/03/28 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
被告答辩状范文
2015/05/22 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python