文字方塊文字自動補全效果範例分享_jquery
- WBOY原創
- 2016-05-16 17:03:21907瀏覽
/*文本自动补全 zhouxiang*/
(function ($) {
$.Completion = function (setting) {
var opts = $.extend({) 🎜> var Completion_Width = null;
//高度
var Completion_Data_Url = null;
//物件
var Completion_Obj = null;
var Completion_Obj_Show = null;
//物件距離 //物件距離上方距
var Completion_Obj_MarginTop = null;
//物件高度
var Completion_Obj_Height = null;
//分類
var Completion_Type_obj = null;
//內容物
Value = null;
//類型
var Completion_Type = null;
//計數
var Completion_N = 0;
//回車回呼
//初始化
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-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() {
//是否開啟型態判斷
Completion_類型 = Completion_Type_obj.val();
}
letion_Value = Completion_Value.replace(" ", "");
//執行驗證
(Completion_Value);
Completion_Data_Bind();
} else {
}
}
//驗證
function Completion_Verific ) {
function Completion_Verificſ(obj) { return false;
}
}
//製作 $.ajax({
url: Completion_Data_Url,
}
function Completion_Selected(obj) {
Completion_Obj.val(obj.find("ul").text( ));
Completion_Obj_Show.hide();
}
//构造内容
function Completion_Add_Html(obj) {
var data = obj.Completion_Data;
//执行验证
Completion_Verification(data);
var ComPletion_Li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//执行验证是否为空
var dr = data[i];
Completion_Verification(dr);
var ComPletionName = dr.ComPletion_Name;
pleastionName = ploteionname.replace（pleastion_value.touppercase（），" " postion_value.touppercase（)」li>約" dr.ComPletion_Count "筆記錄" ComPletionName "
li>";
_Li != " ") {
Completion_Obj_Html(Completion_Html);
} else {
Completion_Obj_Show. hide();
}
function MouseHover(obj) {
Completion_Obj_Show .find("li").mouseover(function () {
Completion_Obj_Show.find("li").find("a").remove j.val($(this).find("ul"). text());
以定型_N = Completion_Obj_Show.find("li").index(this ) }
// 綁定至控制項
子Completion_Obj_Html(html ) {
Completion_Obj_Show.show();
Obj_Show.css({ "width": Completion_Width 6, "height": Completion_Height, "border" -寬度":" 1px ”，“邊框顏色”：“#CCC”，“邊框頂部寬度”：“0px”，“邊框樣式”：“實心”，“位置”：“相對”，“z-index”：“ 100000" } );
Completion_Obj_Show.attr("class", "Completion-guess-list ");
Completion_N = -1;
Completion_Obj_Show.find( "li" }).unbind("click").click(function () {
Completion_Selected ($(this)); Completion_物件顯示.click(function (e) {
e.stopPropagation();
bj.click(function (e) {
Cimpletion_Bind();
});
$(文書).click );
});
}
//載入
Completion_Loading .DefaultSetting = {
Completion_Height: null,
Completion_Data_Url: null,
Completion_Obj: null,
Completion_Count: 10,
Completion_Type_obj: null,
;
})(jQuery);
.Completion-guess-list ul, li
{
邊距： >
}
.Completion-guess-list
{
溢位：自動；
字體大小：12px;
# 高：180% ; 🎜>}
.Completion-guess-list a
{
顏色: #555;
文字裝飾: 無; 溢出：隱藏；
空白：nowrap;
font-family:Verdana,arial;
}
.Completion-guess-list a .c-right{flo-right ; }
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
背景: #3399ff;
🎜>}
.Completion-guess-list a:hover span.c-total,.Completion-guess-list a.Completion-guess-list-hover span.c-total{顏色:# fff;}
.Completion-guess-list .c-hover{font-weight:700;}
複製程式碼
程式碼如下：
$.Completion({ Completion_Obj(Int(Obj(Input) ”），Completion_Data_Url：“/CompletionHandler.ashx”，Completion_Height：“自動”，Completion_Obj_Show：$（“#show”），Completion_Bool：true，Completion_Type_obj：$（“#Type”），Completion_Bool：true，Completion_Type_obj：$（“#Type”），Completion_CertCert（Completion” 1); }, 完成長度: 0 });