热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了基于jquery实现的自动补全功能的方法,涉及jQuery操作数据实现补全的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

代码如下:

$(function() {
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thisCount =0;// 初始化他框的位置
    $("body").prepend("
");
    $("#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 += "
  • " + v + "
  • ";
                            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                 {
                        $("#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程序设计有所帮助。


    推荐阅读
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    • Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • VScode格式化文档换行或不换行的设置方法
      本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
    • CSS3选择器的使用方法详解,提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
    • Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
    • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
    • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
    • HTML5网页模板怎么加百度统计?
      本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
    • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
      本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
    • express工程中的json调用方法
      本文介绍了在express工程中如何调用json数据,包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ... [详细]
    • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
    author-avatar
    金瑞期货秦臻
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有