失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法

easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法

时间:2020-10-02 13:05:49

相关推荐

easyui select选择框模糊查询 以及页面引入多个版本的jquery解决办法

eaeyui版本1.4.4,下载地址

/download/index.php

下拉框模糊查询例子:

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglib uri="/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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、火狐浏览器检索中文是只有在按一下键盘才搜索的问题

$.bo.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解决办法》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。