jquery實現文本框的文本自動補全效果

 這篇文章主要介紹了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-