模仿百度搜索功能，根据空格搜索数据及列表页面根据标注颜色

SQL过滤：多字段过滤

SELECT TEXT FROM (
	SELECT 'ABCDEFG' TEXT FROM DUAL
	UNION
	SELECT '123456789' TEXT FROM DUAL
)
WHERE (REGEXP_LIKE(TEXT, '12|A') OR REGEXP_LIKE(TEXT, '12|A'))

过滤结果：

jsp页面代码实现：

$(function(){
			// 页面搜索条件：“12 AB”
			var textContentArr = $.trim($("#textContent").val()).split(/[(\s)\s]+/);
			$("table td span").each(function(){
				// 标签中显示的文本字符串
				var str = $(this).html();
				// 根据搜索条件匹配，获取匹配字符的下标集合
				var resultIndexArr = [];
				for(var i = 0; i < textContentArr.length; i++){		
					var checkStr = textContentArr[i];
					getCharAtIndexArr(resultIndexArr, checkStr, str);
				}
				// 数组排序
				resultIndexArr = resultIndexArr.sort(function(a,b){
					return a-b;
				});
				// 将字符串转换为数组
				var strArr = str.split('');
				for(var i = 0; i < resultIndexArr.length; i++){
					var index = resultIndexArr[i];
					strArr.splice(index, 1, '<span class="text-red">' + strArr[index] + '</span>');
				}
				// 将数组转换成字符串
				str = strArr.join('');
				$(this).html(str);
			})
		})
		
		// 获取字符串匹配的所有数组数据
		function getCharAtIndexArr(resultIndexArr, checkStr, str){
			var indexArr = [];
			var checkStrLength = checkStr.length;
			// 获取字符串匹配到的所有下标
			while (str.indexOf(checkStr) > -1) {
				var index = str.indexOf(checkStr);
				str = str.substr(index + 1);
				if(indexArr.length > 0){
					index += indexArr[indexArr.length - 1] + 1;
				}
				for(var i = 0; i < checkStrLength; i++){
					indexArr.push(index+i);
				}
			}
			
			// 数组合并
			for(var i = 0; i < indexArr.length; i++){
				if(resultIndexArr.indexOf(indexArr[i]) === -1){
					resultIndexArr.push(indexArr[i]);
				}
			}
		}

思路：

1、先获取搜索条件中的数据按照空格拆分成数组；

2、将页面展示的数据进行循环；

3、列表数据循环中将匹配的字符串下标获取到；

4、根据下标修改字符串中的内容；

其他：

SQL中的过滤条件传参时需要将空格的搜索条件转换成|进行搜索

通过“$.trim($("#textContent").val()).split(/[(\s)\s]+/).join("|")”进行传参