文字框文字自動補全效果示例分享

2022-10-07 12:36:09 字數 3735 閱讀 8534

複製** **如下:

/*文字自動補全 zhouxiang*/

(function ($) , $.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;

//物件rebfpra高度

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()

//初始化

function init()

//給物件新增事件

function completion_obj_addevent()

});completion_obj.keydown(function (event) else if (completion_n != 0)

//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:

&nrebfprabsp;       if (completion_n + 1 < completion_obj_show.find("li").length) else if (completion_n + 1 == completion_obj_show.find("li").length)

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());

&nbs                 completion_obj_show.find("li").eq(completion_n).find("a").addclass("completion-guess-list-hover");

break;

default:

break;

}});

}//繫結方法

function cimrebfprapletion_bind()

completion_value = completion_obj.val();

completion_value = completion_value.replace(" ", "");

//執行驗證

completion_verification(completion_value);

if (completion_value.length > 1) else

}//驗證

function completion_verification(obj)

}//執行ajax請求 得到資料

function completion_data_bind() ,

type: "post",

datatype: "json",

success: function (obj)

});}

//選中

function completion_selected(obj)

//構造內容

function completion_add_html(obj)

if (completion_li != "") else }}

//mouse

function mousehover(obj) );

}//繫結到控制項

function completion_obj_html(html) );

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 () );

mousehover($(this));

completion_obj_show.click(function (e) )

completion_obj.click(function (e) );

$(document).click(function () );

}//載入

completion_loading();

};//預設配置

$.completion.defaultsetting = ;

})(jquery);

複製** **如下:

body

.completion-guess-list ul, li

.completion-guess-list

.completion-guess-list a

.completion-guess-list a .c-total

.completion-guess-list a:hover,.completion-guess-list a.completion-guess-list-hover

.completion-guess-list a:hover span.c-total,.completion-guess-list a.completion-guess-list-hover span.c-total

.completion-guess-list .c-hover

複製** **如下:

$.completion(, completion_length: 0 });

本文標題: 文字框文字自動補全效果示例分享

本文位址:

JQuery實現文字框自動補全

color blue 採用jquery和.net中的一般處理程式實現文字框的簡單自動補全,鍵盤控制功能暫無!color page language c autoeventwireup true codefile default.aspx.cs inherits default color blue ...

Latex之使用文字框, 文字框如何自動斷頁

如果要實現latex文字框,可以使用tcolorbox包.使用時首先匯入 usepackage在使用時 begin colback black 3 white,colframe black 30 white text end即可.colback指背景的顏色,colframe指邊框的顏色.根據自己的需...

input文字框的提示效果

input文字框的提示有很多種,可以根據需求進行選擇 通過設定placeholder屬性值進行提示 placeholder 屬性提供可描述輸入字段預期值的提示資訊 hint 該提示會在輸入欄位為空時顯示,並會在字段獲得焦點時消失。例如 通過設定title屬性進行提示 title 屬性規定關於元素的額...