自定义select之模糊查询

最新推荐文章于 2023-07-01 15:23:08 发布
最新推荐文章于 2023-07-01 15:23:08 发布
阅读量1.7k 收藏
点赞数
分类专栏： javascript 文章标签： select 模糊查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sreddouilyongxia/article/details/78094298
版权 
//select 模糊查询
function FuzzyQuery() {
	var _this   = this;
	_this.value = "";
}

FuzzyQuery.prototype = {
	constructor : FuzzyQuery,
	init : function(option) {
		var _this        = this;
		var options      = option || {};
		//计数
		_this.amount     = 0;
		//所在容器id
		_this.id         = options.parentId;
		//接口
		_this.url        = options.apiUrl;
		//参数
		_this.dataSetId  = options.dataSetId;
		_this.fieldType  = option.fieldType;
		console.log(_this.fieldType);
		console.log(option)
		//标题名称
		_this.isTitle    = options.isTitle?options.isTitle : "";
		//select的class
		_this.isClass    = options.isClass?options.isClass : "";
		//select的返回值设置
		_this.isVal      = options.isVal?options.isVal : "";
		_this.style      = options.style?options.style:"";
		//判断是否返显
		_this.returnFlag = options.returnFlag?options.returnFlag:false;
		_this.fn         = options.fn;
		
		$(_this.id).append(_this.drawSelect());
		_this.getDataList();
		_this.event();
	}, 
	drawSelect : function() {
    	var _this = this;
		return '<div class="fuzzy-query-body" style="'+_this.style+'">' + _this.isTitle + '<input allattr="isrequired" type="text" class="fuzzy-query" placeholder="请选择..." />\
                <div class="fuzzy-query-lists"></div>\
                <select type="hidden" class="fuzzy-query ' + _this.isClass + '"></select></div>';
	}, 
	getDataList : function() {
		var _this = this;
		var fieldTypeList = {'0':'str', '1':'integers', '2':'twoDecimalPlaces', '3':'twoDecimalPlaces', '4':'isBlooean', '5':'integers', '6':'stringArr', '7':'twoDecimalPlacesArr'};
		var getFieldType  = '';
		
		console.log('_this.isVal: '+_this.isVal);
		
		
		if(sessionStorage.getDrlFieldConLists && 
		   !_this.fieldType && _this.fieldType!==0 && 
		   $(_this.id).parents('.operations_main.commom__main').length===0 && 
		   !$(_this.id).hasClass('dialog_public_body')){
			var datas = JSON.parse(sessionStorage.getDrlFieldConLists);
			//console.log(amountforRuleList++);
			//本类型的字段
			if(!datas) {
            	$(_this.id).find('select').empty();
            	$(_this.id).find('.fuzzy-query-lists').html('<span class="empty">查无此项</span>');
            	return false;
			}
			_this.value = datas.map(function(item, index) {
				return '<option data-fieldTitle="' + item.fieldTitle + '"\
                        value="' + item.fieldId + '"\
                        data-dataSetId="' + item.dataSetId + '"\
                        data-fieldId="' + item.fieldId + '"\
                        data-fieldName="' + item.fieldName + '"\
                        data-fieldType="' + item.fieldType + '"\
                        >' + item.fieldTitle + '</option>';
			}).join('');
            
			$(_this.id).find("select").html(_this.value);
            
			if(!_this.amount && _this.isVal){
            	$(_this.id).find("select").val(_this.isVal);
            	$(_this.id).find("input").val($(_this.id).find("select").find("option:selected").attr("data-fieldtitle"));
			}
			var $_aOpts_ = $(_this.id).find("select").find("option");

			$(_this.id).find(".fuzzy-query-lists").empty();
			$_aOpts_.each(function(index, item) {
				$(_this.id).find(".fuzzy-query-lists").append('<div class="fuzzy-query-lists-chid" title="'+$(item).attr("data-fieldtitle")+'">' + $(item).attr("data-fieldtitle") + '</div>');
			});
            
			//模糊查询功能
			$(_this.id).find(".fuzzy-query-lists").find(".fuzzy-query-lists-chid").each(function(index, item) {
				var _self = this;
				$(_self).on("click", function(e) {
					$(_self).parent().animate({"opacity" : 0}, 100, function() {
						$(_this.id).find("input").val($(_self).html());
						$(_this.id).find("select")[0].selectedIndex = index;
                    	$(_this.id).find("select").trigger("change");
						$(this).css({"display" : "none"});
					});
					e.stopPropagation();
					return false;
				});
			});
			_this.fn && _this.fn($(_this.id).find("select"));
		}else{
			console.log(_this.fieldType)
			var filedTypeToNumber = 0;
			var filedTypeJson = {'0':'str', '1':'integers', '2':'twoDecimalPlaces', '3':'twoDecimalPlaces', '4':'isBlooean', '5':'integers', '6':'stringArr', '7':'twoDecimalPlacesArr'};
			for(var name in filedTypeJson){
				if(_this.fieldType===filedTypeJson[name]){
					filedTypeToNumber = name;
					break;
				}
			}
			console.log(filedTypeToNumber)
			$.ajax({
				url : _this.url, 
				type : "POST", 
				data : {
					dataSetId : _this.dataSetId, 
					fieldTitle : _this.returnFlag?$(_this.id).find("input").val():'',
					fieldType : _this.returnFlag?filedTypeToNumber:''
				},
				async:false,
				success : function(data) {
					if(data.success) {
						var datas = data.data;
						sessionStorage.getDrlFieldConLists = JSON.stringify(datas);
						//本类型的字段
						if(!datas) {
	                    	$(_this.id).find("select").empty();
	                    	$(_this.id).find(".fuzzy-query-lists").html('<span class="empty">查无此项</span>');
	                    	return false;
						}
						_this.value = datas.map(function(item, index) {
							return '<option data-fieldTitle="' + item.fieldTitle + '"\
	                                value="' + item.fieldId + '"\
	                                data-dataSetId="' + item.dataSetId + '"\
	                                data-fieldId="' + item.fieldId + '"\
	                                data-fieldName="' + item.fieldName + '"\
	                                data-fieldType="' + item.fieldType + '"\
	                                >' + item.fieldTitle + '</option>';
						}).join('');
	                    
						$(_this.id).find("select").html(_this.value);
	                    
						if(!_this.amount && _this.isVal){
	                    	$(_this.id).find("select").val(_this.isVal);
	                    	$(_this.id).find("input").val($(_this.id).find("select").find("option:selected").attr("data-fieldtitle"));
						}
						var $_aOpts_ = $(_this.id).find("select").find("option");

						$(_this.id).find(".fuzzy-query-lists").empty();
						$_aOpts_.each(function(index, item) {
							$(_this.id).find(".fuzzy-query-lists").append('<div class="fuzzy-query-lists-chid" title="'+$(item).attr("data-fieldtitle")+'">' + $(item).attr("data-fieldtitle") + '</div>');
						});
	                    
						//模糊查询功能
						$(_this.id).find(".fuzzy-query-lists").find(".fuzzy-query-lists-chid").each(function(index, item) {
							var _self = this;
							$(_self).on("click", function(e) {
								$(_self).parent().animate({"opacity" : 0}, 100, function() {
									$(_this.id).find("input").val($(_self).html());
									$(_this.id).find("select")[0].selectedIndex = index;
	                            	$(_this.id).find("select").trigger("change");
									$(this).css({"display" : "none"});
								});
								e.stopPropagation();
								return false;
							});
						});
						_this.fn && _this.fn($(_this.id).find("select"));
					}else{
						//alert(data.errorMessage);
					}
					_this.amount++;
				}, 
				error : function() {
					//alert(data.errorMessage);
				}
			});
		}
			
			
		
	}, 
	event : function() {
		var _this = this;
		$(_this.id).find("input.fuzzy-query").on("focus click", function(e) {

			$(_this.id).find(".fuzzy-query-lists").css({"display" : "block"}).animate({"opacity" : 1},100);
			
			e.stopPropagation();
			return false;
		});

		$(_this.id).find("input").on("keyup", function() {
			$.ajax({
				url : _this.url, 
				type : "POST", 
				data : {
					dataSetId : _this.dataSetId, 
					fieldTitle : $(_this.id).find("input").val(),
					fieldType:_this.returnFlag?_this.fieldType:''
				},
				success : function(data) {
					if(data.success) {
						var datas = data.data;
						if(!sessionStorage.ruleData){
							sessionStorage.ruleData = JSON.stringify(datas);
						}
						if(!datas) {
	                    	$(_this.id).find("select").empty();
	                    	$(_this.id).find(".fuzzy-query-lists").html('<span class="empty">查无此项</span>');
	                    	return false;
						}
						_this.value = datas.map(function(item, index) {
							return '<option data-fieldTitle="' + item.fieldTitle + '"\
	                                value="' + item.fieldId + '"\
	                                data-dataSetId="' + item.dataSetId + '"\
	                                data-fieldId="' + item.fieldId + '"\
	                                data-fieldName="' + item.fieldName + '"\
	                                data-fieldType="' + item.fieldType + '"\
	                                >' + item.fieldTitle + '</option>';
						}).join("");
	                    
						$(_this.id).find("select").html(_this.value);
	                    
						if(!_this.amount && _this.isVal){
	                    	$(_this.id).find("select").val(_this.isVal);
	                    	$(_this.id).find("input").val($(_this.id).find("select").find("option:selected").attr("data-fieldtitle"));
						}
						var $_aOpts = $(_this.id).find("select").find("option");

						$(_this.id).find(".fuzzy-query-lists").empty();
						$_aOpts.each(function(index, item) {
							$(_this.id).find(".fuzzy-query-lists").append('<div class="fuzzy-query-lists-chid">' + $(item).attr("data-fieldtitle") + '</div>');
						});
	                    
						//模糊查询功能
						$(_this.id).find(".fuzzy-query-lists").find(".fuzzy-query-lists-chid").each(function(index, item) {
							var _self = this;
							$(_self).on("click", function(e) {
								$(_self).parent().animate({"opacity" : 0}, 100, function() {
									$(_this.id).find("input").val($(_self).html());
									$(_this.id).find("select")[0].selectedIndex = index;
	                            	$(_this.id).find("select").trigger("change");
									$(this).css({"display" : "none"});
								});
								e.stopPropagation();
								return false;
							});
						});

						_this.fn && _this.fn(_this);

					}else{
						//alert(data.errorMessage);
					}
					_this.amount++;

				}, 
				error : function() {
					//alert(data.errorMessage);
				}
			});
		});
	}
};

自定义select 之 模糊查询
面向对象的夜猫子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现select模糊查询（反射机制）
10-20
总结来说，jQuery实现select模糊查询涉及以下几个步骤： 1. 定义默认样式和配置。 2. 创建一个动态的建议列表容器。 3. 监听用户输入，过滤数据并更新建议列表。 4. 为建议列表的项绑定事件，以便用户交互时响应。 5...
select下拉带模糊搜索功能
04-26
然而，为了实现模糊搜索，我们需要对其进行扩展，通常会使用自定义的HTML结构来替代原生的`<select>`，这样可以更好地控制样式和交互。例如，我们可以创建一个`<input>`元素作为搜索框，以及一个隐藏或定制样式的`...
html前端输入框模糊查询
spring_007_999的博客
07-01 1880
html前端输入框模糊查询
搜索框模糊查询并选中
qq_23473631的博客
09-26 361
一、HTML部分 二、JS板块 data() { return { inputValue: “”, //输入框中的内容 isShow: false, //控制搜索的问题显示隐藏 resData: [ { name: “大话西游之月光宝盒” }, { name: “大话西游之仙履奇缘” }, { name: “功夫” }, { name: “喜剧之王” }, { name: “武状元苏乞儿” }, { name: “食神” }, { name: “百变星君” }, { name: “逃学威龙1
MyBatis-@select注解实现模糊查询的两种方式
qq_39203889的博客
02-27 1万+
@Select("select * from xxx where name like #{name} ") List<xxx> findByName(String name) 测试的时候,传入的参数要拼接为 userDao.findByName("%name%") 第二中是占位符, value,{value} ,value,符号,属性必须是value,取参数的值 @Selec...
初学者教程——select查询_模糊查询
weixin_52980837的博客
06-22 3500
文章目录一、查询结果排序1. “%”通配符可以匹配0到多个任意字符2. “_”通配符匹配任意一个字符二、IN运算符三、between...and运算符下一章节学习——第五章--MySQL函数 模糊查询是利用数据的部分信息进行查找的一种查询方式。如果数据库用户在进行查询实体的全部具体信息，仅知道其部分信息，此时即可使用like运算符进行模糊查询。 提示：以下是本篇文章正文内容，下面案例可供参考 一、查询结果排序 LIKE运算符 代码如下（示例）： 在MySQL中，使用通配符实现like运算。 通配.
【AntD+Vue】使用Select模糊查询（模糊查询及渲染大量数据卡顿问题）：
SunPeng的博客
11-23 2174
【AntD+Vue】使用Select模糊查询（模糊查询及渲染大量数据卡顿问题）：
下拉模糊查询 jQuery-select
02-24
**下拉模糊查询 jQuery-select 知识点详解** 在网页开发中，下拉框（Dropdown）是常见的用户界面元素，用于提供多个选项供用户选择。然而，传统的下拉框在选项众多时，用户查找特定选项可能会变得困难。为了解决这...
combo-select 模糊查询下拉框
04-08
使用"combo-select 模糊查询下拉框"时，开发者需要在HTML页面中引入jQuery库和这两个关联文件，并创建对应的HTML结构，通常是`<select>`元素或者自定义的HTML元素。接着，通过调用JavaScript函数或应用特定的数据...
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
文件名"jquery.automultiselect"暗示了这个实现可能基于jQuery，利用其强大的DOM操作和事件处理能力，结合自定义的插件或函数来实现模糊查询和多选功能。 实现这种功能通常包括以下步骤： 1. 监听用户输入：使用...
SQL怎么实现模糊查询
学而不思则忘
12-06 2万+
模糊查询的语句一般如下： SELECT 字段 FROM 表 WHERE 某字段 LIKE 条件; 关于条件部分，有以下匹配模式： 1. %：表示零个或多个字符。 可以匹配任意类型和任意长度的字符，有些情况下若是中文，请使用两个百分号（%%）表示。 select * from user where username like '%张%'; 将会把user这张表里面，列名username中含有张的记录全部查询出来。 如果需要找到user这张表里面，字段username中既有张，又有李的记录，可以使用and
elementUI el-select模糊搜索，固定位置在选择框下面，value绑定对象显示，key显示id
qq_42440919的博客
01-28 2609
elementUI el-select 固定位置 模糊搜索 清空
react+antd select下拉框实现模糊搜索匹配
柠檬草的博客
12-07 2239
antd组件 快速实现下拉框模糊搜索匹配
select下拉框带模糊查询_SQL简单查询
weixin_39884832的博客
11-30 917
一、基本的查询语句select <列名1>,<列名2>,..... from <表名>;1. select*：星号（*）查询出全部列2. as：为列设定别名select 姓名 as s_name,性别 as '人类性别' from student; 列的别名为中文时要加上'' 但，列名不能加''3. 删除重复数据：distinct...
简单实用js——可输入可选择可模糊查询的select下拉
热门推荐
孙振光的博客
11-03 6万+
在网上有很多可输入及模糊查询的select下拉插件，功能也很强大，比如select、chosen等，做这个的方法也是有很多的，适用自己就好，下面是我自己的一个方法，希望适合大家 CSS代码 .second select { width: 11%; height: 106px; margin: 0px; outline: none; border:
关于下拉框搜索功能（模糊搜索）
dapyandxpy的博客
05-29 1万+
1. 首先在html页面定义一个div和获取下拉菜单的div &lt;div class="col-xs-7"&gt; &lt;input type="text" class="form-control" placeholder="请选择上报机构" id="reportOrgan" onblur="setTimeout('hideOrganDiv()',200);&q
select注解自定义sql查询某个参数包含在list里面怎么书写
qq_45295297的博客
08-03 718
select自定义sql查询某个值在list里面
el-select模糊查询
最新发布
09-22
el-select模糊查询是通过输入关键字来筛选下拉框选项的功能。一般情况下，el-select的模糊查询是根据选项的label属性进行匹配。如果想要根据value属性进行模糊查询，需要添加filterable属性，并且设置filter-method属性为自定义的筛选方法。在筛选方法中，可以使用防抖函数来避免频繁触发筛选操作。具体实现方法可以参考以下链接：https://blog.csdn.net/keke11211/article/details/124585150。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值