jsonsuggest是一个不错的js插件,可以实现模糊联想查询,效果如图,
客户体验还是不错,不过我也是弄了一两天,基于我同事修改过的源码之上,我还修改了源码
(function($) {
$.fn.jsonSuggest = function(searchData, settings) {
var defaults = {
minCharacters : 1,
maxResults : undefined,
wildCard : "",
caseSensitive : false,
notCharacter : "!",
maxHeight : 350,
highlightMatches : true,
onSelect : undefined,
ajaxResults : false,
key : "id",
value : "name",
textId : ""
};
settings = $.extend(defaults, settings);
return this.each(function() {
function regexEscape(txt, omit) {
var specials = ['/', '.', '*', '+', '?', '|', '(', ')', '[',
']', '{', '}', '\\'];
if (omit) {
for (var i = 0; i < specials.length; i++) {
if (specials[i] === omit) {
specials.splice(i, 1);
}
}
}
var escapePatt = new RegExp('(\\' + specials.join('|\\') + ')',
'g');
return txt.replace(escapePatt, '\\$1');
}
var obj = $(this), wildCardPatt = new RegExp(
regexEscape(settings.wildCard || ''), 'g'), results = $('<div />'), currentSelection, pageX, pageY;
function selectResultItem(item) {
$(results).html('').hide();
var tId = settings.textId;
$('#' + tId).val(item.name);
if (typeof settings.onSelect === 'function') {
settings.onSelect(item, settings.textId);
}
}
function setHoverClass(el) {
$('div.resultItem', results).removeClass('hover');
$(el).addClass('hover');
currentSelection = el;
}
function buildResults(resultObjects, sFilterTxt) {
var v1 = settings.key;
var v2 = settings.value;
sFilterTxt = "(" + sFilterTxt + ")";
var bOddRow = true, i, iFound = 0, filterPatt = settings.caseSensitive
? new RegExp(sFilterTxt, "g")
: new RegExp(sFilterTxt, "ig");
$(results).html('').hide();
for (i = 0; i < resultObjects.length; i += 1) {
var item = $('<div />'), text = resultObjects[i][v1];
// 楂樹寒鏄剧ず 杈撳叆鐨勫瓧绗�
// if (settings.highlightMatches === true) {
// text = text.replace(filterPatt,
// "<strong>$1</strong>");
// }
$(item).append('<p class="text">' + text + ':'
+ resultObjects[i][v2]);
$(item).append('</p>');
if (typeof resultObjects[i].image === 'string') {
$(item).prepend('<img src="' + resultObjects[i].image
+ '" />')
.append('<br style="clear:both;" />');
}
$(item).addClass('resultItem').addClass((bOddRow)
? 'odd'
: 'even').click(function(n) {
return function() {
selectResultItem(resultObjects[n]);
};
}(i)).mouseover(function(el) {
return function() {
setHoverClass(el);
};
}(item));
$(results).append(item);
bOddRow = !bOddRow;
iFound += 1;
if (typeof settings.maxResults === 'number'
&& iFound >= settings.maxResults) {
break;
}
}
if ($('div', results).length > 0) {
currentSelection = undefined;
$(results).show().css('height', 'auto');
if ($(results).height() > settings.maxHeight) {
$(results).css({
'overflow' : 'auto',
'height' : settings.maxHeight + 'px'
});
}
}
}
function checkStr(str) {
var iu, iuu, regArray = new Array("", "◎", "■", "●", "№", "↑",
"→", "↓" + "!", "@", "#", "$", "%", "^", "&", "*", "(",
")", "_", "-", "+", "=", "|", "'", "[", "]", "?", "~",
"`" + "!", "<", ">", "‰", "→", "←", "↑", "↓", "¤", "§",
"#", "&", "&", "\", "≡", "≠" + "≈", "∈", "∪", "∏", "∑",
"∧", "∨", "⊥", "∥", "∥", "∠", "⊙", "≌", "≌", "√", "∝",
"∞", "∮" + "∫", "≯", "≮", ">", "≥", "≤", "≠", "±", "+",
"÷", "×", "/", "Ⅱ", "Ⅰ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ",
"Ⅹ", "Ⅻ", "㈠", "㈡" + "╄", "╅", "╇", "┻", "┻", "┇", "┭",
"┷", "┦", "┣", "┝", "┤", "┷", "┷", "┹", "╉", "╇", "【",
"】" + "㈢", "㈣", "㈤", "㈥", "㈦", "㈧", "㈨", "㈩", "①", "②",
"③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "┌", "├", "┬",
"┼", "┍", "┕", "┗", "┏", "┅", "─" + "〖", "〗", "←", "〓",
"☆", "§", "□", "‰", "◇", "︿", "@", "△", "▲", "#", "℃",
"※", ".", "≈", "¢");
iuu = regArray.length;
for (iu = 1; iu <= iuu; iu++) {
if (str.indexOf(regArray[iu]) != -1) {
return false;
}
}
return true;
}
function runSuggest(e) {
if (this.value.length < settings.minCharacters) {
$(results).html('').hide();
return false;
}
var resultObjects = [], sFilterTxt = (!settings.wildCard)
? regexEscape(this.value)
: regexEscape(this.value, settings.wildCard).replace(
wildCardPatt, '.*'), bMatch = true, filterPatt, i;
if (settings.notCharacter
&& sFilterTxt.indexOf(settings.notCharacter) === 0) {
sFilterTxt = sFilterTxt.substr(
settings.notCharacter.length, sFilterTxt.length);
if (sFilterTxt.length > 0) {
bMatch = false;
}
}
sFilterTxt = sFilterTxt || '.*';
sFilterTxt = settings.wildCard ? '^' + sFilterTxt : sFilterTxt;
filterPatt = settings.caseSensitive
? new RegExp(sFilterTxt)
: new RegExp(sFilterTxt, "i");
if (settings.ajaxResults === true) {
var JsonURL = searchData(this.value, settings.wildCard,
settings.caseSensitive, settings.notCharacter);
$.ajaxSetup({
cache : false
});
if (checkStr(this.value)) {
$.getJSON(JsonURL, function(data) {
if (typeof data === 'string') {
data = JSON.parse(data);
}
buildResults(data, sFilterTxt);
});
} else {
alert("不允许包含非法字符" + this.value);
this.value = "";
this.focus();
}
} else {
for (i = 0; i < searchData.length; i += 1) {
if (filterPatt.test(searchData[i].text) === bMatch) {
resultObjects.push(searchData[i]);
}
}
}
buildResults(resultObjects, sFilterTxt);
}
function keyListener(e) {
switch (e.keyCode) {
case 13 :
$(currentSelection).trigger('click');
return false;
case 40 :
if (typeof currentSelection === 'undefined') {
currentSelection = $('div.resultItem:first',
results).get(0);
} else {
currentSelection = $(currentSelection).next()
.get(0);
}
setHoverClass(currentSelection);
if (currentSelection) {
$(results).scrollTop(currentSelection.offsetTop);
}
return false;
case 38 :
if (typeof currentSelection === 'undefined') {
currentSelection = $('div.resultItem:last', results)
.get(0);
} else {
currentSelection = $(currentSelection).prev()
.get(0);
}
setHoverClass(currentSelection);
if (currentSelection) {
$(results).scrollTop(currentSelection.offsetTop);
}
return false;
default :
runSuggest.apply(this, [e]);
}
}
$(results).addClass('jsonSuggestResults').css({
'top' : (obj.position().top + obj.height() + 5) + 'px',
'left' : obj.position().left + 'px',
'width' : obj.width() + 'px'
}).hide();
obj.after(results).keyup(keyListener).blur(function(e) {
var resPos = $(results).offset();
resPos.bottom = resPos.top + $(results).height();
resPos.right = resPos.left + $(results).width();
if (pageY < resPos.top || pageY > resPos.bottom
|| pageX < resPos.left || pageX > resPos.right) {
$(results).hide();
}
}).focus(function(e) {
$(results).css({
'top' : (obj.position().top + obj.height() + 5)
+ 'px',
'left' : obj.position().left + 'px'
});
if ($('div', results).length > 0) {
$(results).show();
}
}).attr('autocomplete', 'off');
$().mousemove(function(e) {
pageX = e.pageX;
pageY = e.pageY;
});
if ($.browser.opera) {
obj.keydown(function(e) {
if (e.keyCode === 40) {
return keyListener(e);
}
});
}
settings.notCharacter = regexEscape(settings.notCharacter || '');
if (!settings.ajaxResults) {
if (typeof searchData === 'function') {
searchData = searchData();
}
if (typeof searchData === 'string') {
searchData = JSON.parse(searchData);
}
}
});
};
})(jQuery);
以下是我调用的jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'employeelist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jsonSuggest-dev.js"></script>
<script type="text/javascript" src="js/jquery.jsonSuggest.js"></script>
<link rel="stylesheet" href="css/jsonSuggest.css" type="text/css"></link>
<script type="text/javascript">
$(function (){
$('#empName').jsonSuggest(
function(text, wildCard, caseSensitive, notCharacter) {
var pin = $("#empName");
var url = "ownerListAction.do?pin="+pin.val();
return url;
},{ajaxResults:true,minCharacters:1,key:"ename",value:"eenl",textId:"empName"});
})
</script>
</head>
<body>
<input id="empName" />
</body>
</html>
分享到:
相关推荐
私信博主免费获取真题解析以及代码
Screenshot_2024-05-10-20-21-01-857_com.chaoxing.mobile.jpg
数字图像处理|Matlab-频域增强实验-彩色图像的频域滤波.zip
2024-2030中国定向转向膜市场现状研究分析与发展前景预测报告
开源工时填报管理系统安装包
电子元件 电子行业 行业分析 数据分析 数据报告 行业报告
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
18-17.网站域名DNS被劫持,网站服务器密码被改.mp4
QYResearch:2023年前五大2,3,3',4'-联苯四甲酸二酐(α-BPDA)企业占据全球91%的市场份额.docx
2024-2030中国仿生智能餐饮机器人市场现状研究分析与发展前景预测报告
82-82.渗透测试-CVE-2017-8464“震网三代 反弹shell演示课件.mp4
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
渗透测试渗透测试之SQL注入基于报错注入(下)
Android是一种基于Linux内核(不包含GNU组件)的自由及开放源代码的移动操作系统,主要应用于移动设备,如智能手机和平板电脑。该系统最初由安迪·鲁宾开发,后被Google公司收购并注资,随后与多家硬件制造商、软件开发商及电信营运商共同研发改良。 Android操作系统的特点包括: 开放源代码:Android系统采用开放源代码模式,允许开发者自由访问、修改和定制操作系统,这促进了技术的创新和发展,使得Android系统具有高度的灵活性和可定制性。 多任务处理:Android允许用户同时运行多个应用程序,并且可以轻松地在不同应用程序之间切换,提高了效率和便利性。 丰富的应用生态系统:Android系统拥有庞大的应用程序生态系统,用户可以从Google Play商店或其他第三方应用市场下载和安装各种各样的应用程序,满足各种需求。 可定制性:Android操作系统可以根据用户的个人喜好进行定制,用户可以更改主题、小部件和图标等,以使其界面更符合个人风格和偏好。 多种设备支持:Android操作系统可以运行在多种不同类型的设备上,包括手机、平板电脑、智能电视、汽车导航系统等。 此外,Android系统还有一些常见的问题,如应用崩溃、电池耗电过快、Wi-Fi连接问题、存储空间不足、更新问题等。针对这些问题,用户可以尝试一些基本的解决方法,如清除应用缓存和数据、降低屏幕亮度、关闭没有使用的连接和传感器、限制后台运行的应用、删除不需要的文件和应用等。 随着Android系统的不断发展,其功能和性能也在不断提升。例如,最新的Android版本引入了更多的安全性和隐私保护功能,以及更流畅的用户界面和更强大的性能。此外,Android系统也在不断探索新的应用场景,如智能家居、虚拟现实、人工智能等领域。 总之,Android系统是一种功能强大、灵活可定制、拥有丰富应用生态系统的移动操作系统,在全球范围内拥有广泛的用户基础。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
46-46.渗透测试-Kali Linux安全渗透.mp4
电子元件 电子行业 行业分析 数据分析 数据报告 行业报告
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
【名企实践】华为如何打造高绩效团队glq.pptx