easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法
2016-01-09 18:15
691 查看
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" onclick="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的
当我们导入jQuery时,jQuery仅向window这个全局空间注入两个变量:
同时,jQuery内部保留旧的
当我们调用:
所以,让新旧版本共存的jQuery可以这样实现:
在
至此,问题解决。
但是,引入两个版本的jQuery后,页面被搞得乱七八糟。如果有人看不懂代码,把
最好的办法是不改动页面,直接引用我们编写的新的js文件:
这样一来,我们就在
开始编写新的更好的解决方案。首先,把
用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码访问。
下一步是直接把jQuery 1.11的代码嵌进去:
嵌入的当然是压缩后的代码,一共3行,然后加一句:
注意到
最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。
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" onclick="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代码。
相关文章推荐
- jQuery页面刷新(局部、全部)问题分析
- jquery实现模拟点击跳转 $.trigger
- jquery实现模拟点击跳转 $.trigger
- jquery学习随笔(冒泡和默认行为)
- ajax局部刷新后里面的jquery事件失效的解决方法
- jquery页面刷新reload
- 异步加载数据 jQuery $.getJSON
- Jquery Ajax发送请求的方法
- jquery学习随笔(事件对象)
- oschina jQuery 插件
- oschina jQuery 插件
- 使用jqueryui
- jQuery: 做一个简单的模版加载
- jQuery立即调用表达式
- jquery源码分析——元素大小
- jQuery EasyUI combobox多选及赋值
- jQuery-iframe加载完成后触发的事件监听
- 基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
- ajax和jquery使用技巧
- jquery 处理破图