基于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 相关文章推荐
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Javascript实现基本运算器
Jul 15 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
JavaScript实现简单的音乐播放器
Aug 14 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的特殊设置
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
js tab效果的实现代码
2009/12/26 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python文件操作函数用法实例详解
2019/12/24 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python 获取字典键值对的实现
2020/11/12 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
学校三八妇女节活动情况总结
2014/03/09 职场文书
村居抓节水倡议书
2014/05/19 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android