共4个文件
Default.css
index.jsp(注意这个文件需要引入jquery)Ajax.jsp
jquery.Completion.js-----------------Default.css---------------------------
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;}------index.jsp-------------------
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/public/init.jsp"%>
<script src="jquery.Completion.js" type="text/javascript"></script>
<link href="Default.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
$.Completion({ Completion_Obj: $("#Input_Html"), Completion_Data_Url: "Ajax.jsp", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { alert("你按了回车"); }, Completion_Length: 0 });
});
</script>
</head>
<body>
<!--动态设置查询类别(用于有几个文本补全时可以一个方法解决)-->
<input type="text" id="Type" value="1" style="margin-left: 400px; margin-top: 100px;" />
<!--输入值的文本框-->
输入框:<input id="Input_Html" class="Completion-input" style="
width: 200px" />
<!--加载下拉显示-->
<div id="show">
</div>
</body>
</html>--------------Ajax.jsp-------------------<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% //获取输入文字
String keyWord = request.getParameter("CompletionValue");
//获取类型
String TypeID =request.getParameter("CompletionType");
//获取数量
int Count = Integer.parseInt(request.getParameter("CompletionCount"),10);
JSONArray sa=new JSONArray();
for(int i=0;i<10;i++){
JSONObject jsonObject = new JSONObject();
jsonObject.put("ComPletion_Name", "huangwuyi"+i);
jsonObject.put("ComPletion_Count", "444"+i);
sa.add(jsonObject);
}
//中国-------------%E4%B8%AD%E5%9B%BD
System.out.println("获取输入文字"+java.net.URLDecoder.decode(keyWord,"UTF-8"));
System.out.println("获取类型"+TypeID);
System.out.println("获取数量"+request.getParameter("CompletionCount"));
out.clear();
out.print(sa);
%>js
Default.css
index.jsp(注意这个文件需要引入jquery)Ajax.jsp
jquery.Completion.js-----------------Default.css---------------------------
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;}------index.jsp-------------------
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/public/init.jsp"%>
<script src="jquery.Completion.js" type="text/javascript"></script>
<link href="Default.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
$.Completion({ Completion_Obj: $("#Input_Html"), Completion_Data_Url: "Ajax.jsp", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { alert("你按了回车"); }, Completion_Length: 0 });
});
</script>
</head>
<body>
<!--动态设置查询类别(用于有几个文本补全时可以一个方法解决)-->
<input type="text" id="Type" value="1" style="margin-left: 400px; margin-top: 100px;" />
<!--输入值的文本框-->
输入框:<input id="Input_Html" class="Completion-input" style="
width: 200px" />
<!--加载下拉显示-->
<div id="show">
</div>
</body>
</html>--------------Ajax.jsp-------------------<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% //获取输入文字
String keyWord = request.getParameter("CompletionValue");
//获取类型
String TypeID =request.getParameter("CompletionType");
//获取数量
int Count = Integer.parseInt(request.getParameter("CompletionCount"),10);
JSONArray sa=new JSONArray();
for(int i=0;i<10;i++){
JSONObject jsonObject = new JSONObject();
jsonObject.put("ComPletion_Name", "huangwuyi"+i);
jsonObject.put("ComPletion_Count", "444"+i);
sa.add(jsonObject);
}
//中国-------------%E4%B8%AD%E5%9B%BD
System.out.println("获取输入文字"+java.net.URLDecoder.decode(keyWord,"UTF-8"));
System.out.println("获取类型"+TypeID);
System.out.println("获取数量"+request.getParameter("CompletionCount"));
out.clear();
out.print(sa);
%>js
/*
Name:Jquery Completion v1.0
Author:zhouxiang
website:http://www.zhou-xiang.com
*/
(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;
//要加载HTML的对象
var Completion_Obj_Show = null;
//对象距离左边距
var Completion_Obj_MarginLeft = null;
//对象距离上边距
var Completion_Obj_MarginTop = null;
//对象高度
var Completion_Obj_Height = null;
//最多显示多少条
var Completion_Count = null;
//大于多少个字符后进行AJAX
var Completion_Length = 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;
//获取长度
Completion_Length = opts.Completion_Length;
}
//给对象添加事件
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:
console.log("上键清除所有的选中样式");
if (Completion_N == 0) {
Completion_N = (Completion_Obj_Show.find("li").length - 1);
} else if (Completion_N != 0) {
Completion_N = Completion_N - 1;
}
Cimpletion_KeyUpDown();
break;
//下键
case 40:
console.log("下键 清除所有的选中样式");
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
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;
}
Cimpletion_KeyUpDown();
break;
//不触发事件
default:
break; }
});
}
//按键触发
function Cimpletion_KeyUpDown() {
//清除所有的选中样式,为什么这个地方清除了所有样式,那个鼠标悬浮的a标签的样式还存在呀
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");
}
//mouse
function MouseHover() {
Completion_Obj_Show.find("li").mouseover(function () {
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
console.log("MouseHover绑定样式");
// Completion_Obj.val($(this).find("ul").text());
Completion_N = Completion_Obj_Show.find("li").index(this);
});
}
//绑定方法
function Cimpletion_Bind() {
//是否有传入类型
if (Completion_Bool) {
//获取当前对象的类型标识
Completion_Type = Completion_Type_obj.val();
}
//获取当前对象的值
Completion_Value =encodeURIComponent(Completion_Obj.val());
//清除空格
Completion_Value = Completion_Value.replace(" ", "");
//执行验证
Completion_Verification(Completion_Value);
//判断长度
if (Completion_Value.length > Completion_Length) {
//得到数据 构造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() {
console.log("执行请求");
$.ajax({
url: Completion_Data_Url,
//后台做处理判断CompletionType的值是否为空
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下的文本
Completion_Obj.val(obj.find("ul").text());
//隐藏
Completion_Obj_Show.hide();
}
//构造内容
function Completion_Add_Html(obj) {
var data = obj;
//执行验证
Completion_Verification(data);
//申明变量保存LI标签HMTL
var ComPletion_Li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//执行验证是否为空
var dr = data[i];
//验证DR是否为空
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>";
}
//当ComPletion_Li不为空 则进行加载显示
if (ComPletion_Li != "") {
var Completion_Html = "<ul>" + ComPletion_Li + "</ul>";
//绑定显示
Completion_Obj_Html(Completion_Html);
} else {
//为空则隐藏
Completion_Obj_Show.hide();
}
}
}
//绑定到控件
function Completion_Obj_Html(html) {
//显示
Completion_Obj_Show.show();
//清空原有HTML
Completion_Obj_Show.html("")
//设置样式
Completion_Obj_Show.css({ "width": Completion_Width + 5, "height": Completion_Height, "border-width": "1px", "border-color": "#CCC", "border-top-width": "0px", "border-style": "solid", "position": "relative", "z-index": "100000", "margin-left": Completion_Obj_MarginLeft });
//指定class 一般更改修改样式文件即可
Completion_Obj_Show.attr("class", "Completion-guess-list");
Completion_Obj_Show.html(html);
//初始化 计数
Completion_N = -1;
MouseHover();
//给LI标签添加选择事件
Completion_Obj_Show.find("li").unbind("click").click(function () {
Completion_Selected($(this));
});
//防止冒泡
Completion_Obj_Show.click(function (e) {
e.stopPropagation();
})
//防止冒泡
Completion_Obj.click(function (e) {
Cimpletion_Bind();
e.stopPropagation();
});
//点击document 隐藏显示对象
$(document).click(function () {
Completion_Obj_Show.hide();
});
}
//加载
Completion_Loading();
};
//默认配置
$.Completion.DefaultSetting = {
//高度
Completion_Height: null,
//与后台交互的ashx文件路径
Completion_Data_Url: null,
//对象
Completion_Obj: null,
//下拉显示对象
Completion_Obj_Show: null,
//是否开启类型区分
Completion_Bool: false,
//一次查询多少条
Completion_Count: 10,
//即时获取类型值的对象
Completion_Type_obj: null,
//回车按键 回调方法
Completion_ClickCall: null,
//长度
Completion_Length: null
};
})(jQuery);
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
background: #3399ff;
color: #fff;
}去掉2个a的伪类/*.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;}
MouseHover增加一句
//mouse
function MouseHover() {
Completion_Obj_Show.find("li").mouseenter(function () {
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
console.log("MouseHover绑定样式");
// Completion_Obj.val($(this).find("ul").text());
////////////////////////////////////////////////////////////////////
$('a', this).addClass("Completion-guess-list-hover")//添加hover样式,
////////////////////////////////////////////////////////////////////
Completion_N = Completion_Obj_Show.find("li").index(this);
console.log("MouseHover绑定样式" + Completion_N);
});
}