文本框文本自動(dòng)補(bǔ)全效果示例分享
/*文本自動(dòng)補(bǔ)全 zhouxiang*/
(function ($) {
$.Completion = function (setting) {
var opts = $.extend({}, $.Completion.DefaultSetting, setting);
//寬度
var Completion_Width = null;
//高度
var Completion_Height = null;
//數(shù)據(jù)源(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;
//內(nèi)容
var Completion_Value = null;
//類型
var Completion_Type = null;
//是否傳入類型
var Completion_Bool = false;
//計(jì)數(shù)
var Completion_N = 0;
//回車回調(diào)
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;
//獲取訪問數(shù)據(jù)庫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-hover");
Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());
Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");
break;
default:
break;
}
});
}
//綁定方法
function Cimpletion_Bind() {
//是否開啟類型判斷
if (Completion_Bool) {
Completion_Type = Completion_Type_obj.val();
}
Completion_Value = Completion_Obj.val();
Completion_Value = Completion_Value.replace(" ", "");
//執(zhí)行驗(yàn)證
Completion_Verification(Completion_Value);
if (Completion_Value.length > 1) {
//得到數(shù)據(jù) 構(gòu)造HTML
Completion_Data_Bind();
} else {
Completion_Obj_Show.hide();
}
}
//驗(yàn)證
function Completion_Verification(obj) {
if (obj == "" || obj == null || obj == undefined) {
return false;
}
}
//執(zhí)行AJAX請求 得到數(shù)據(jù)
function Completion_Data_Bind() {
$.ajax({
url: Completion_Data_Url,
data: { CompletionValue: Completion_Value, CompletionCount: Completion_Count, CompletionType: Completion_Type },
type: "post",
dataType: "json",
success: function (obj) {
//構(gòu)造HTML
Completion_Add_Html(obj);
}
});
}
//選中
function Completion_Selected(obj) {
Completion_Obj.val(obj.find("ul").text());
Completion_Obj_Show.hide();
}
//構(gòu)造內(nèi)容
function Completion_Add_Html(obj) {
var data = obj.Completion_Data;
//執(zhí)行驗(yàn)證
Completion_Verification(data);
var ComPletion_Li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//執(zhí)行驗(yàn)證是否為空
var dr = data[i];
Completion_Verification(dr);
var ComPletionName = dr.ComPletion_Name;
ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "<span class='c-hover'>" + Completion_Value.toUpperCase() + "</span>");
ComPletion_Li += "<li><a href='javascript:;'><span class='c-total'>約" + dr.ComPletion_Count + "條記錄</span><ul>" + ComPletionName + "</ul></a></li>";
}
if (ComPletion_Li != "") {
var Completion_Html = "<ul style='list-style-type:none;'>" + ComPletion_Li + "</ul>";
Completion_Obj_Html(Completion_Html);
} else {
Completion_Obj_Show.hide();
}
}
}
//mouse
function MouseHover(obj) {
Completion_Obj_Show.find("li").mouseover(function () {
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
Completion_Obj.val($(this).find("ul").text());
Completion_N = Completion_Obj_Show.find("li").index(this);
});
}
//綁定到控件
function Completion_Obj_Html(html) {
Completion_Obj_Show.show();
Completion_Obj_Show.html("")
Completion_Obj_Show.css({ "width": Completion_Width + 6, "height": Completion_Height, "border-width": "1px", "border-color": "#CCC", "border-top-width": "0px", "border-style": "solid", "position": "relative", "z-index": "100000" });
Completion_Obj_Show.attr("class", "Completion-guess-list");
Completion_Obj_Show.html(html);
Completion_N = -1;
Completion_Obj_Show.find("li").unbind("click").click(function () {
Completion_Selected($(this));
});
MouseHover($(this));
Completion_Obj_Show.click(function (e) {
e.stopPropagation();
})
Completion_Obj.click(function (e) {
Cimpletion_Bind();
e.stopPropagation();
});
$(document).click(function () {
Completion_Obj_Show.hide();
});
}
//加載
Completion_Loading();
};
//默認(rèn)配置
$.Completion.DefaultSetting = {
Completion_Height: null,
Completion_Data_Url: null,
Completion_Obj: null,
Completion_Obj_Show: null,
Completion_Bool: false,
Completion_Count: 10,
Completion_Type_obj: null,
Completion_ClickCall: null
};
})(jQuery);
body
{
margin: 0;
padding: 0;
}
.Completion-guess-list ul, li
{
margin: 0;
padding: 0;
list-style:none;
}
.Completion-guess-list
{
overflow: auto;
font-size: 12px;
line-height: 180%;
background: #fff;
}
.Completion-guess-list a
{
color: #555;
text-decoration: none;
display: block;
padding: 1px 6px;
overflow: hidden;
white-space: nowrap;
font-family:Verdana,arial;
}
.Completion-guess-list a .c-total{float:right;color:green;}
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
background: #3399ff;
color: #fff;
}
.Completion-guess-list a:hover span.c-total,.Completion-guess-list a.Completion-guess-list-hover span.c-total{color:#fff;}
.Completion-guess-list .c-hover{font-weight:700;}
$.Completion({ Completion_Obj: $("#Input_Html"), Completion_Data_Url: "/CompletionHandler.ashx", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { alert(1); }, Completion_Length: 0 });
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- php使HTML標(biāo)簽自動(dòng)補(bǔ)全閉合函數(shù)代碼
- PHP+jQuery實(shí)現(xiàn)自動(dòng)補(bǔ)全功能源碼
- JSP + ajax實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全功能 實(shí)例代碼
- jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
- 讓 python 命令行也可以自動(dòng)補(bǔ)全
- 給Python IDLE加上自動(dòng)補(bǔ)全和歷史功能
- Python 自動(dòng)補(bǔ)全(vim)
- Python實(shí)現(xiàn)Tab自動(dòng)補(bǔ)全和歷史命令管理的方法
- Android實(shí)現(xiàn)登錄郵箱的自動(dòng)補(bǔ)全功能
相關(guān)文章
jQuery動(dòng)態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
本篇文章是對在jQuery中動(dòng)態(tài)設(shè)置form表單的enctype值的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQury Ajax使用Token驗(yàn)證身份實(shí)例代碼
這篇文章主要介紹了jQury Ajax使用Token驗(yàn)證身份實(shí)例代碼,需要的朋友可以參考下2017-09-09
jquery實(shí)現(xiàn)超簡潔的TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)超簡潔的TAB選項(xiàng)卡效果代碼,涉及jquery通過鼠標(biāo)click事件結(jié)合鏈?zhǔn)讲僮鲃?dòng)態(tài)操作tab選項(xiàng)卡的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery中使用data()方法讀取HTML5自定義屬性data-*實(shí)例
如果你使用jQuery類庫，那么你可以非常愉悅的使用jquery的data()方法存取data-* 自定義屬性，方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)2014-04-04
jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能
圖片上傳，網(wǎng)上有好多版本，今天小編給大家分享jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能，感興趣的的朋友一起看看吧2017-08-08
Raphael一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
Raphael是一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細(xì)介紹，感興趣的朋友可以了解下哦2013-01-01
jQuery自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)
下面小編就為大家?guī)硪黄猨Query自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼，需要的朋友可以參考下2012-02-02
jquery對table中各數(shù)據(jù)的增加、保存、刪除操作示例
這篇文章主要介紹了jquery對table中各種數(shù)據(jù)的增加、保存、刪除操作,需要的朋友可以參考下2014-05-05