最近公司需求,写了一个小插件,基于jquery,代码很小,只有几行,效果如下:
废话不多说,直接上代码:
$.fn.SelectColor = function(options) {
var defaults = {
'content': 'body'
};
var changeValue="";
var parma = $.extend(defaults, options);
this.bind('input porpertychange',function(){
var _value=this.value;
//过滤
var pattern = new RegExp("[~'!@#$%^&*()-+_=:<>-]");
if (changeValue == _value ||pattern.test(_value))
return;
changeValue=_value
var _content = $(parma.content);
if (_content.length>0) {
_content.each(function () {
var _item = $(this);
//1,remove
var _contentHtml = _item.html();
_contentHtml = _contentHtml.replace('<selected style="color:red" class="text-danger">', '');
_contentHtml = _contentHtml.replace('</selected>', '');
//2,add
_item.html(_contentHtml.replace(changeValue, '<selected style="color:red" class="text-danger">' + changeValue + '</selected>'));
})
}
});
return this;
}
用法如下:
<script src="~/Content/XianghuSelectedColor/Jquery.SelectColor.js"></script>
<script>
$(function () {
$("#search").SelectColor(
{
content: ".tree-title"
}
);
})
</script>
很简单,#search是监听文本框,.tree-title是你需要查找的内容区域。