这篇文章主要介绍了jquery实现文本框的文本自动补全效果,大家参考使用吧

  代码如下: /*文本自动补全 zhouxiang*/   (function ($) {     $.Completion = function (setting) {         var opts = $.extend({}, $.Completion.DefaultSetting, setting);         //宽度         var Completion_Width = null;         //高度         var Completion_Height = null;         //数据源(ashx)访问路径         var Completion_Data_Url = null;         //对象         var Completion_Obj = null;         var Completion_Obj_Show = null;         //对象距离左边距         var Completion_Obj_MarginLeft = null;         //对象距离上边距         var Completion_Obj_MarginTop = null;         //对象高度         var Completion_Obj_Height = null;         //分类         var Completion_Count = null;         //         var Completion_Type_obj = null;         //内容         var Completion_Value = null;         //类型         var Completion_Type = null;         //是否传入类型         var Completion_Bool = false;         //计数         var Completion_N = 0;         //回车回调         var Completion_ClickCall = null;         //加载         function Completion_Loading() {             //初始化             Init();             //绑定事件             Completion_Obj_AddEvent();         }         //初始化         function Init() {             Completion_Obj_Show = opts.Completion_Obj_Show;             //获取对象             Completion_Obj = opts.Completion_Obj;             //获取对象宽度             Completion_Width = Completion_Obj.width();             //获取层显示高度             Completion_Height = opts.Completion_Height;             //获取访问数据库URL             Completion_Data_Url = opts.Completion_Data_Url;             //每次查询多少条记录             Completion_Count = opts.Completion_Count;             //获取对象高度             Completion_Obj_Height = Completion_Obj.height();             //获取左边距             Completion_Obj_MarginLeft = Completion_Obj.offset().left;             //获取上边距             Completion_Obj_MarginTop = parseInt(Completion_Obj.offset().top) + parseInt(Completion_Obj_Height);             Completion_Type_obj = opts.Completion_Type_obj;             Completion_Bool = opts.Completion_Bool;             Completion_ClickCall = opts.Completion_ClickCall;         }         //给对象添加事件         function Completion_Obj_AddEvent() {             Completion_Obj.keyup(function (event) {                 switch (event.keyCode) {                     case 38:                         break;                     case 40:                         break;                     case 13:                         Completion_ClickCall();                         break;                     default:                         //按键事件 延迟操作                           Cimpletion_Bind();                         break;                 }               });             Completion_Obj.keydown(function (event) {                 switch (event.keyCode) {                     case 13:                         break;                     case 38:                         if (Completion_N == 0) {                             Completion_N = (Completion_Obj_Show.find("li").length - 1);                         } else if (Completion_N != 0) {                             Completion_N = Completion_N - 1;                         }                         //alert(Completion_N);                         Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");                         Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");                         Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());                             break;                     case 40:                         if (Completion_N + 1 < Completion_Obj_Show.find("li").length) {                             Completion_N = Completion_N + 1;                         } else if (Completion_N + 1 == Completion_Obj_Show.find("li").length) {                             Completion_N = 0;                         }                         Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-