发布一个文本自动定位组件,可实现在特定区域中定位文本并高亮显示, 用来解决项目组中机构人员选择时人员过多无法准确定位的问题。
主要功能为:
1.支持即输即显
2.支持模糊查询
3.支持动画滚动定位到搜索内容,当有多个内容匹配时,定位到第一个匹配内容
4.支持对中文字符进行搜索
5.使用简便,灵活指定样式,选中样式在独立css中定义
6.轻量级,总共1K
本功能插件基于jquery实现,使用了到jquery.scrollTo插件,主要提供对特定区域的文本内容的进行搜索定位。实现很简单,有注释,大家一看就明白了的:
js
(function($) {
$.widget("fishout.scrollToText", {
/***********************
* Initialise SuperArea *
***********************/
_init : function() {
var inputDom = $("#" + this.options.inputId);//获得输入源
this.element.css("overflow-y", "auto").width(this.options.width).height(this.options.height);//定制搜索区域
var $this = this;
inputDom.keyup(function() {
var str = inputDom.val();
if ($this.pre) {
$this.pre.removeClass($this.options.selectClass);//清除历史选中的样式
}
if (str.gblen() >= $this.options.startMinLen) {//gblen是计算中文字节长度的方法
//获得本次过滤的jquery对象
$this.pre = $this.element.find($this.options.queryDom + ":contains('" + $(this).val() + "')"+($this.options.maxFilter!=-1?':lt('+$this.options.maxFilter+')':''));
$this.pre.addClass($this.options.selectClass);//高亮显示
$('#contains').stop().scrollTo($this.pre.eq(0), $this.options.delayTime);//自动定位
}
});
}});
// Public global variables
$.extend($.fishout.scrollToText, {
version: '0.9',
pre:null,
defaults :{
inputId:'',//过滤控件id
queryDom:'td',//搜索组件区域,目前仅支持单个属性,有需求会扩展为数组[]
width:"100%",//控件宽度
height:"100px",//控件高度
delayTime: 1000,//定位动画时间
startMinLen: 4,//启动过滤最小的字符数
maxFilter: 10,//最大过滤结果 -1不限制
selectClass:'selectText'//选中对象的样式class
}});
})(jQuery);
组件使用方式如下:
html
<div style="background:#AAE3FF;width:220px;">
过滤条件:<input type="text" id="qrystr" value=""></div>
<div id="contains" style="border:1px dotted black">
<!--<div id="contains" style="width:220px;height:200px;overflow-y:auto;">-->
<table style="width:200px;height:100%" border=1>
<tr>
<td>
<input type="radio">组织机构1
</td>
<td>
<input type="radio">组织机构2
</td>
</tr>
<tr>
<td>
<input type="radio">组织机构11
</td>
<td>
<input type="radio">组织机构12
</td>
</tr>
</table>
</div>
</body>
<script type='text/javascript'>
$(function() {
$('#contains').scrollToText({
inputId:'qrystr',//过滤控件id
width:"220px",//控件宽度
height:"300px",//控件高度
delayTime: 1000,//定位动画时间
startMinLen: 4,//启动过滤最小的字符数
maxFilter: 10,//最大过滤结果 当=-1不限制
selectClass:'selectText'//符合过滤条件内容class
});
})
</script>
使用截图如下 :
下载:文本定位插件代码包
最后说几句题外话:
其实类似的功能我更倾向于用类似google的自动提示来实现,即使要多选也可以通过一个结果区域来存放历史结果最后一起提交,不过该功能为紧急上线,所以就偷懒紧急写了插件给部门先用起来了。
Tag标签: jquery