jQuery 实现 select模糊查询 反射机制
2024-03-24 08:04:51
通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：
(function($) {
$.selectSuggest = function(target, data, itemSelectFunction) {
var defaulOption = {
suggestMaxHeight: '200px',//弹出框最大高度
itemColor : '#000000',//默认字体颜色
itemBackgroundColor:'RGB(199,237,204)',//默认背景颜色
itemOverColor : '#ffffff',//选中字体颜色
itemOverBackgroundColor : '#C9302C',//选中背景颜色
itemPadding : 3 ,//item间距
fontSize : 12 ,//默认字体大小
alwaysShowALL : true //点击input是否展示所有可选项
};
var maxFontNumber = 0;//最大字数
var currentItem;
var suggestContainerId = target + "-suggest";
var suggestContainerWidth = $('#' + target).innerWidth();
var suggestContainerLeft = $('#' + target).offset().left;
var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();
var showClickTextFunction = function() {
$('#' + target).val(this.innerText);
currentItem = null;
$('#' + suggestContainerId).hide();
}
var suggestContainer;
if ($('#' + suggestContainerId)[0]) {
suggestContainer = $('#' + suggestContainerId);
suggestContainer.empty();
} else {
suggestContainer = $('<div></div>'); //创建一个子<div>
}
suggestContainer.attr('id', suggestContainerId);
suggestContainer.attr('tabindex', '0');
suggestContainer.hide();
var _initItems = function(items) {
suggestContainer.empty();
var itemHight=0;
for (var i = 0; i < items.length; i++) {
if(items[i].text.length > maxFontNumber){
maxFontNumber = items[i].text.length;
}
var suggestItem = $('<div></div>'); //创建一个子<div>
suggestItem.attr('id', items[i].id);
suggestItem.append(items[i].text);
suggestItem.css({
'padding':defaulOption.itemPadding + 'px',
'white-space':'nowrap',
'cursor': 'pointer',
'background-color': defaulOption.itemBackgroundColor,
'color': defaulOption.itemColor
});
suggestItem.bind("mouseover",
function() {
$(this).css({
'background-color': defaulOption.itemOverBackgroundColor,
'color': defaulOption.itemOverColor
});
currentItem = $(this);
});
suggestItem.bind("mouseout",
function() {
$(this).css({
'background-color': defaulOption.itemBackgroundColor,
'color': defaulOption.itemColor
});
currentItem = null;
});
suggestItem.bind("click", showClickTextFunction);
suggestItem.bind("click", itemSelectFunction);
suggestItem.appendTo(suggestContainer);
suggestContainer.appendTo(document.body);
}
}
var inputChange = function() {
var inputValue = $('#' + target).val();
inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
var matcher = new RegExp(inputValue, "i");
return $.grep(data,
function(value) {
return matcher.test(value.text);
});
}
$('#' + target).bind("keyup",
function() {
_initItems(inputChange());
});
$('#' + target).bind("blur",
function() {
if(!$('#' + suggestContainerId).is(":focus")){
$('#' + suggestContainerId).hide();
if (currentItem) {
currentItem.trigger("click");
}
currentItem = null;
return;
}
});
$('#' + target).bind("click",
function() {
if (defaulOption.alwaysShowALL) {
_initItems(data);
} else {
_initItems(inputChange());
}
$('#' + suggestContainerId).removeAttr("style");
var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;
var containerWidth = Math.max(tempWidth, suggestContainerWidth);
var h = this.scrollHeight;
$('#' + suggestContainerId).css({
'border': '1px solid #ccc',
'max-height': '100px',
'top': suggestContainerTop,
'left': suggestContainerLeft,
'width': containerWidth,
'position': 'absolute',
'font-size': defaulOption.fontSize+'px',
'font-family':'Arial',
'z-index': 99999,
'background-color': '#FFFFFF',
'overflow-y': 'auto',
'overflow-x': 'hidden',
'white-space':'nowrap'
});
$('#' + suggestContainerId).show();
});
_initItems(data);
$('#' + suggestContainerId).bind("blur",
function() {
$('#' + suggestContainerId).hide();
});
}
})(jQuery);
html如下：
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>select.suggest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.select.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<div>
<div>
<div>.col-md-1
</div>
<div style="">
<input id="testInput" type="text" />
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
</body>
<script type="text/javascript">
var datas =[{"id":"2","text":"中国石油"},
{"id":"4","text":"中国建筑"},
{"id":"3","text":"中国移动"},
{"id":"5","text":"中国工商银行"},
{"id":"7","text":"中国铁建"},
{"id":"8","text":"上海汽车集团"},
{"id":"9","text":"中国建设银行"},
{"id":"10","text":"联想集团"}];
var itemSelectFuntion = function(){
alert(this.id + "," + this.innerHTML);
};
$.selectSuggest('testInput',datas,itemSelectFuntion);
</script>
</html>
jQuery 实现 select模糊查询 反射机制相关推荐
- jQuery实现id模糊查询
在js中常常会用到某类似id的模糊查询,可以使用jquery工具和模糊查询"^",来实现.下面用另个例子说明 eg_1. 在页面中查找某id图片集合,先放到代码: <div ...
- 使用jQuery实现实时模糊查询功能
先说一下模糊查询 在方法上写的SQL是跟数据库里边的不一样,这里果断入坑了. 来个MySQL例子: 模糊查询user中的name: select * from user where name like ...
- jquery三级联动模糊查询_js相关：jQuery实现三级联动效果
js相关:jQuery实现三级联动效果 发布于 2020-7-21| 复制链接 摘记: 很久没写了,顺带复习,写了一个jQuery实现的三级联动,供大家参考,具体内容如下 ```xhtml .. 很久 ...
- jquery三级联动模糊查询_jquery三级联动
三级联动 --请选择-- --请选择-- --请选择-- $(function(){functioninitCity(){ $("#city").html('--请选择--'); ...
- jquery ajax动态模糊查询插件
html代码如下: <div id="select_model"><div style="width: 150px;line-height: 24px& ...
- C语言的模糊查询,【C语言如何实现中文模糊查询+急+】
C语言如何实现中文模糊查询? (急) 2009年02月25 - 我要建立一个生物信息检索系统,如何用C语言实现数据的模糊查询,数据包括中文和英文,请高手指点(最好附上例子或源程序),谢谢! 怎样用c语 ...
- mysql模糊查询的优化方法--亲自实践
数据有4W多条,不多,但是模糊查询 起来特别慢. 1,尝试过用 select * from (select * from a union all select * from b...很多表union) ...
- mybatis学习之路----模糊查询实现
点滴记载,点滴进步,愿自己更上一层楼. 废话不多说,进入主题. 项目还是在上篇 mybatis学习之路----非代理方式的增删改查用法 基础之上进行开发 一个简单的模糊查询sql. SELECT * ...
- easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法
eaeyui版本1.4.4,下载地址 http://www.jeasyui.com/download/index.php 下拉框模糊查询例子: <%@ page language="j ...
最新文章
- Datawhale第五期组队学习团队成员
- boost::rational模块相关的测试程序
- 12-基于selenium实现12306模拟登录，及京东登录滑动缺口验证模拟登录
- html怎么查看两个块的距离,两个东西之间的距离怎么控制
- 使用Maven进行硒测试自动化
- C#LeetCode刷题-数学
- spring c3p0 mysql_spring boot整合mybatis使用c3p0数据源连接mysql
- DLL系列6.函数转发器
- SQL service 数据库 某工厂的物料管理系统数据库设计与实现
- 证书错误 导航已阻止 无法跳转 最终解决
- 2021高考北京大峪中学成绩查询,2014年北京市各区高考成绩汇总
- 【JS】Number to digit tiers
- rabbitMQ修改默认端口
- 固定IP地址及其重启后地址更改的解决方法
- Distiller 安装时环境配置的一些可选项
- 游戏开发中的数学和物理算法10-18
- 儒家思想的核心：仁、义、礼、智、信、忠、孝、悌、节、恕、勇、让
- 在使用123作为rand matlab,西安电子科技大学MATLAB考试试卷
- simplex法(单纯形) 并在python实现简单的应用
- IOS APP 上了APPStore以后怎么修改搜索关键字