easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法
eaeyui版本1.4.4，下载地址
http://www.jeasyui.com/download/index.php
下拉框模糊查询例子：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录成功</title>
<link rel="stylesheet" type="text/css" href="misc/themes/easyui.css" />
<link rel="stylesheet" type="text/css" href="misc/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="misc/themes/demo.css" />
<script type="text/javascript" src="misc/jquery.min.js"></script>
<script type="text/javascript" src="misc/jquery.easyui.min.js"></script>
</head>
<body>
<h2>
实现功能及说明：</h2>
<div class="demo-info" style="margin-bottom: 10px">
<div>
1、单个词组的模糊查询；<br />
2、onHidePanel事件被触发时自动判断文本框里的值是否有效，无效则清除，同时设置值为null（1.3.6之前的版本当文本框内容无效时默认返回文本框内文本）；<br />
3、通过“$('#id').combobox('getValue')”和“$('#id').val()”都可以获取当前选中的值；<br />
4、使用EasyUI1.3.5测试。</div>
</div>
<select class="easyui-combobox" name="state" id="state" style="width: 200px;">
<option value="">请选择</option>
<option value="AL">你好</option>
<option value="AK">中国</option>
<option value="AZ">东林</option>
<option value="AR">中国你好</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input type="button" value="ShowValue" οnclick="showvalue()" />
<script>
$("#state").combobox({
value: null,
filter: function (q, row) { //q：文本框内你输入的值，row：列表数据集合；
var opts = $(this).combobox('options');
//统一转换成小写进行比较；==0：匹配首位，>=0：匹配任意位置；
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
},
onHidePanel: function () {
//文本框内的文本；
var txt_Box = $("#state").combobox('getText');
//获取列表数据；
var listdata = $.data(this, "combobox");
var rowdata = listdata.data;
//遍历列表，若匹配则将值设为当前列并返回；否则将值设为null；
for (var i = 0; i < rowdata.length; i++) {
var _row = rowdata[i];
var txt_Val = _row["text"];
if (txt_Val.toLowerCase() == txt_Box.toLowerCase()) {
$("#state").combobox('setValue', _row["value"]);
$("#state").val(_row["value"]);
return;
}
}
//若函数没有返回（即没有与文本框内容匹配的条目），值为null，清空文本框；
$("#state").combobox('setValue', null);
$("#state").val(null);
$("#state").combobox('setText', "");
}
});
$("#state").val(null);
$("#state").combobox('setText', "");
function showvalue() {
var gval = $("#state").combobox("getValue");
var gtxt = $("#state").combobox("getText");
var val = $("#state").val();
alert("getValue:" + gval + "\ngetText:" + gtxt + "\nval:" + val);
}
</script>
</body>
</html>
1、easyui默认从第一个单词开始搜索，如果想任意位置搜索
修改jquery.easyui.min.js文件
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())==0;
修改为大于等于0
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())>=0;
2、火狐浏览器检索中文是只有在按一下键盘才搜索的问题
$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{inputEvents:{click:_968,keyup:_96c,paste:_96c,drop:_96c},panelWidth:null,panelHeight:200,panelMinWidth:null,panelMaxWidth:null,panelMinHeight:null,panelMaxHeight:null,panelAlign:"left",multiple:false,selectOnNavigation:true,separator:",",hasDownArrow:true,delay:200,keyHandler:{up:function(e){
将keydown修改为keyup
二：引入多个jQuery版本解决办法
你可能会问，为什么需要在一个页面上让多个jQuery共存？直接引用最新版本的jQuery不行吗？
答案是，不行。因为现实生活是非常残酷的。举个栗子：
现有网站已经引用了jQuery 1.5以及相关插件。如果直接将jQuery升级到最新版，这些插件就不工作了，除非你能把这些插件全部升级，或者等各个插件的作者发布支持最新版jQuery的版本。
现在，如果我们要基于jQuery开发新的插件或者写JavaScript代码，用新版本会比较省时省力。
但旧版本又绝对不能扔掉，怎么办？
方法是通过jQuery的noConflict()来让多版本共存。
当我们导入jQuery时，jQuery仅向window这个全局空间注入两个变量：
window.$ = window.jQuery = { jQuery object };
同时，jQuery内部保留旧的window.$和window.jQuery对象的引用。当我们调用：
var $jq = $.noConflict();
window.$被恢复，但window.jQuery仍是jQuery。
当我们调用：
var $jq = $.noConflict(true);
window.$和window.jQuery都被恢复了，一切看起来就像jQuery从未被导入过一样，只不过可以通过变量$jq来使用jQuery。
所以，让新旧版本共存的jQuery可以这样实现：
<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>// 现在window.$和window.jQuery是1.11版本:console.log($().jquery); // => '1.11.0'var $jq = jQuery.noConflict(true);// 现在window.$和window.jQuery被恢复成1.5版本:console.log($().jquery); // => '1.5.0'// 可以通过$jq访问1.11版本的jQuery了
</script>
<script src="myscript.js"></script>
在myscript.js中，用$jq就可以访问1.11版本的jQuery了。
至此，问题解决。
但是，引入两个版本的jQuery后，页面被搞得乱七八糟。如果有人看不懂代码，把var $jq = jQuery.noConflict(true);删掉了怎么办？或者，把导入jQuery的两行互换了位置，最后就得不到正确的jQuery版本。
最好的办法是不改动页面，直接引用我们编写的新的js文件：
<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>
这样一来，我们就在myscript.js内部引用最新版jQuery，而页面无论有没有jQuery，有哪个版本的jQuery，我们都不关心。
开始编写新的更好的解决方案。首先，把myscript.js的主体确定下来：
// myscript.js
(function () {// BEGIN// TODO: javascript code here...// END
})();
用匿名函数是个好习惯，不污染全局变量，同时杜绝外部代码访问。
下一步是直接把jQuery 1.11的代码嵌进去：
// myscript.js
(function () {// BEGIN/*! jQuery v1.11.1 */!function(a,b){"object"==typeof module&&"object"==typeof module.exports?...if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...var $ = jQuery.noConflict(true);// TODO: javascript code here...// END
})();
嵌入的当然是压缩后的代码，一共3行，然后加一句：
var $ = jQuery.noConflict(true);
注意到$是一个局部变量，在后面的代码中，可以随时引用这个$，跟页面上其他版本的jQuery全局变量$不是一个对象。
最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。
easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法相关推荐
- Antd点击select选择框，页面滚动，选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
- html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
- html选择框加模糊查找,input selec下拉框模糊查询
input selec下拉框模糊查询 1.[代码][JavaScript]代码 //1 初始化时候,先将数据存入数组 var TempArr = [];// 存贮option var SelectOb ...
- 解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的 时间:2015-07-17 项目:甘肃银行-手机银行 问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...
- AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- 纯CSS调整select选择框高度，兼容IE/Firefox/Opera/Safair/Chrome
在IE下直接用height.border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边 ...
- ofice2007 没有下拉框模糊查询功能
ofice2007没有下拉框模糊查询功能 另外安装一下wps2019,换着用.
- iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面有上移的异常动画的解决办法。
iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面有上移的异常动画的解决办法. 参考文章: (1)iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面 ...
最新文章
- python 列表有几个元素_python怎么向列表中添加多个元素
- 《评人工智能如何走向新阶段》后记（再续16）
- python网页服务器_python编写简单网页服务器
- C/S和B/S两种模式
- C#(WinForm) + MySQL的中文编码问题（MySQL中文编码的终极解决方案）
- 神奇的折纸艺术！无限翻转完全停不下来
- 【开源项目】基于QT录制PCM音频实例详细
- 视达配色教程17 灰色的色彩意象是什么
- 新手产品经理的职业规划
- 数学建模 时间序列分析
- 想辞职专心做自媒体可以吗？有哪些建议吗？
- ThinkingInJava 学习 之 0000002 操作符
- java 自动装载_JAVA反射技术之自动装载/自动验参
- class反编译软件，超级好用
- JavaScript的发展史
- (附源码)node.js宠物医生预约平台 毕业设计030945
- Python学习笔记4---类和对象
- Flutter 淡入淡出与逐渐出现动画
- 高通 android 7.0 插入蓝牙耳机，声音变的最大！
- 苹果高管公然“开怼”：三星抄袭 iPhone，只加了个大屏