文本框文本自动补全效果示例分享_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_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(" ", "");
//执行验证
Completion_Verification(Completion_Value);
if (Completion_Value.length > 1) {
//得到数据 构造HTML
Completion_Data_Bind();
} else {
Completion_Obj_Show.hide();
}
}
//验证
function Completion_Verification(obj) {
if (obj == "" || obj == null || obj == undefined) {
return false;
}
}
//执行AJAX请求 得到数据
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) {
//构造HTML
Completion_Add_Html(obj);
}
});
}
//选中
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 //执行验证是否为空
var dr = data[i];
Completion_Verification(dr);
var ComPletionName = dr.ComPletion_Name;
ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "" + Completion_Value.toUpperCase() + "");
ComPletion_Li += "
- " + ComPletionName + "
}
if (ComPletion_Li != "") {
var Completion_Html = "
- " + ComPletion_Li + "
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();
};
//默认配置
$.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 });
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
PHP开发：如何实现搜索关键词提示和自动补全功能
Sep 21, 2023 pm 01:01 PM
PHP开发：实现搜索关键词提示和自动补全功能在现今互联网时代，搜索引擎已经成为人们获取信息的重要渠道之一。而在网站开发中，搜索功能的重要性不言而喻。为了提升用户体验和搜索效果，实现搜索关键词提示和自动补全功能是一项非常有价值和必要的开发任务。本文将为大家介绍如何在PHP开发中实现搜索关键词提示和自动补全功能，并提供具体的代码示例。搜索关键词提示是指在用户输入
如何使用Vue和Element-UI实现自动补全功能
Jul 21, 2023 pm 02:53 PM
如何使用Vue和Element-UI实现自动补全功能概述：自动补全是一种非常实用的功能，它能够根据用户的输入提供相关的补全选项，提高用户体验。在Vue框架中，结合Element-UI组件库，实现自动补全功能变得非常简单。本文将介绍如何使用Vue和Element-UI来实现这一功能，并给出相应的代码示例。步骤一：创建Vue项目并引入Element-UI库首先，
推荐几款功能强大的C语言编辑器
Feb 19, 2024 pm 01:40 PM
在计算机编程领域，C语言一直以其简洁、高效的特性受到广大开发者的青睐。而要在C语言编程中提高效率，选择一款好的C语言编辑器是非常重要的。本文将介绍几款功能强大的C语言编辑器，帮助开发者更好地进行C语言编程。VisualStudioCodeVisualStudioCode（简称VSCode）是一款免费、开源的跨平台编辑器，由微软公司开发。它支持多种语
MySQL与Python：如何实现数据查询功能
Jul 31, 2023 pm 01:34 PM
MySQL与Python：如何实现数据查询功能近年来，数据的迅猛增长使得数据查询和分析成为了各个领域的重要任务。而MySQL作为一种广泛使用的关系型数据库管理系统，配合Python这门强大的编程语言，可以提供快速、灵活的数据查询功能。本文将介绍如何使用MySQL和Python来实现数据查询功能，并提供代码示例。首先，我们需要安装并配置MySQL和Python
eclipse自动补全怎么设置
Jan 25, 2024 pm 01:34 PM
设置eclipse自动补全的步骤：1、开启自动补全；2、设置补全提议；3、自定义自动补全提议；4、设置自动补全快捷键；5、其他个性化设置；6、保存并关闭。详细介绍：1、开启自动补全，在Eclipse菜单栏上选择 Window -> Preferences，在弹出的对话框中，展开 Java 选项，选择 Editor -> Content Assist，在右侧的选项卡中等等。
Eclipse IDE中注解的提示和自动补全功能
May 06, 2024 pm 10:36 PM
EclipseIDE中的注解提示和自动补全功能可简化Java开发：提示：悬停在注解上可查看其类型、参数和文档。自动补全：键入注解名称时可自动建议匹配项，包括标准和自定义注解。实战案例演示了提示和自动补全功能的应用。这些功能提升了编码效率和代码质量。
如何使用 JavaScript 实现表单的输入框内容自动补全提示功能？
Oct 24, 2023 pm 12:19 PM
如何使用JavaScript实现表单的输入框内容自动补全提示功能？随着互联网的发展，表单输入框的自动补全提示功能越来越常见。在用户输入内容时，会根据已存在的数据提供可能的补全选项，以方便用户快速选择或输入正确的信息。本文将介绍如何使用JavaScript实现表单的输入框内容自动补全提示功能，并提供具体的代码示例。第一步：创建HTML结构首先，我们
PHP实现搜索框自动补全功能的方法
Mar 07, 2024 am 08:00 AM
搜索框自动补全是一种常见的网页功能，能够提升用户体验并简化搜索过程。在PHP中实现搜索框自动补全功能可以通过Ajax异步请求来实现。下面将介绍具体的实现方法，包括前端代码和后端代码示例。前端代码示例：
