前端实现搜索功能和模糊查询
功能介绍：
在前端实现搜索，获取数据部分可以用ajax来实现，动态生成li标签，正则表达式实现的模糊查询
js实现代码：
// $("#BA_230759697085187").remove()$("#BA_230759697085187").empty()$("#BA_230759697085187").append("<input type='text' id='searchinput' class='searchinput' placeholder='请输入搜索的内容' ><ul id='list'></ul>");window.BApartCustom = window.BApartCustom || [];window.BApartCustom.push(BApartExtend);function BApartExtend() {//数据集取数方法，从产品中抽出// 成功的回调函数var successCall = function (json) {//取数成功后，根据数据实现自己的逻辑功能try {var reval = JSON.parse(json);// console.log(reval.data);if (typeof reval == 'object' && reval) {//页面中的菜单var dataList = reval.data;//有权限的button按钮// console.log(textdom.length)console.log(dataList)var oTxt = document.getElementById('searchinput');var oBtn = document.getElementById('BA_180507071762619');var oList = document.getElementById('list');// console.log(dataList.NAME)//点击事件var dataNameList=[]var dataLineList=[]for(var i=0;i<dataList.length;i++){dataNameList[i]=dataList[i].NAME;dataLineList[i]=dataList[i].DZ;}console.log("dataNameList:"+dataNameList.length)// console.log("dataLineList"+datalineList)// 回车查询oTxt.addEventListener('keydown', function(e){var keyWord = oTxt.value; var searchList = searchByRegExp(keyWord, dataNameList);renderFruits(searchList,dataList);}, false);// 点击搜索按钮查询oBtn.addEventListener('click', function(){var keyWord = oTxt.value; //输入的文本值var searchList = searchByRegExp(keyWord, dataNameList);renderFruits(searchList,dataList);})var cpLock = false;$('#txt').on('compositionstart', function () {cpLock = true;console.log("不搜索")});$('#txt').on('compositionend', function () {cpLock = false;console.log("汉字搜索");var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var searchList = searchByRegExp(keyWord, dataNameList);// console.log(searchList);renderFruits(searchList,dataList);});$('#txt').on('input', function () {if (!cpLock) {console.log("字母搜索")var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var searchList = searchByRegExp(keyWord, dataNameList);// console.log(searchList);renderFruits(searchList,dataList);}});// 渲染列表function renderFruits(list,dataList){if(!(list instanceof Array)){return ;}oList.innerHTML = '';var len = list.length;var item = null;for(var i=0;i<len;i++){item = document.createElement('li');//为了实现跳转，加上<a>标签item.innerHTML = "<a style='color:#fff' href='javascript:; target='_top'' οnclick='func()'>"+list[i]+"</a>";// item.setsetAttribute("link","")oList.appendChild(item);// ntchild(3)}//点击超链接，跳转网页$("ul>li>a").on("click",function(){// console.log("item:"+ list[i])alert($(this).text())for(var i=0;i<dataList.length;i++){if(dataList[i].NAME==$(this).text()){alert(dataList[i].DZ) gsp.rtf.func.openUrl({id:dataList[i].ID,name:dataList[i].NAME,url:dataList[i].DZ,// url:href,reload:true});}}})}//模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。//模糊查询1:利用字符串的indexOf方法function searchByIndexOf(keyWord, list){if(!(list instanceof Array)){return ;}var len = list.length;var arr = [];for(var i=0;i<len;i++){//如果字符串中不包含目标字符会返回-1if(list[i].indexOf(keyWord)>=0){arr.push(list[i]);}}return arr;}// 使用正则匹配实现模糊查询function searchByRegExp(keyWord, list){if(!(list instanceof Array)){return ;// cconsole.log("不是数组")}var arr = [];var reg = new RegExp(keyWord);console.log("reg"+reg)for(var i=0;i<list.length;i++){//如果字符串中不包含目标字符会返回-1if( list[i].match(reg)){arr.push(list[i]);console.log(list[i])}}return arr;}} else {$.messager.alert('提示', '获取数据集失败！', 'error');return null;}} catch (e) {console.log('error：' + json + '!!!' + e);// ajaxComplete() 方法规定 AJAX 请求完成时运行的函数。complete(null);//return;}}// 失败的回调函数var errorCall = function (err) {if (err.responseText.length == 39) {gsp.rtf.errorHandler.gspExHander({ErrorType: 'InvalidContextException', Message: '用户身份信息已丢失' });}//complete(err);return false;}// 这是调用数据集的方法，类似ajax,只是提供数据//数据集编号 fontFamily：'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...fontStyle：'normal' 'italic' 'oblique' fontWeight:'normal' 'bold' 'bolder' 'lighter'// var bh = "test11"; var bh = "CS0_PC_FUNC";//参数var parastr = BA.getUrlParaParam("PARA");//var parastr = "";var options = {assembly: 'Genersoft.BI.Biz.Web', className: 'Genersoft.BI.Biz.Web.WebDataSvr', method: 'GetPartConfigComponent', params: [bh] };var vsJsonPara = {"functionname": "GetDataByCodeOrID", "code": bh, dfParas: parastr, "pageID": BA.GetPageFileID(), "noUseCache": BA.GetNoUseCache() };if (!bh && id) {vsJsonPara = {"functionname": "GetDataByCodeOrID", "id": id, dfParas: parastr, "pageID": BA.GetPageFileID(), "noUseCache": BA.GetNoUseCache() };}var url = "/cwbase/web/session/BA/Request/ChartPart.ashx";options.BAloadoptions = {type: "POST",url: url,dataType: "text",data: vsJsonPara};BA.BAinvoke(options, successCall, errorCall);}
html代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>模糊查询</title><script src="jquery-1.7.2.js"></script><style>*{list-style: none;padding:0;margin:0;}div{text-align: center;padding-top:20px;}ul{padding-top:20px;width:30%;margin:0 50% 0 35%;}li{padding:3px;border:1px solid silver;box-shadow: 1px 1px;}</style></head><body><div><input type="text" id="txt"><button type="button" id="btn">search</button><ul id="list"></ul></div><script>/*** Created by Steven on -10-25.*/var oTxt = document.getElementById('txt');var oBtn = document.getElementById('btn');var oList = document.getElementById('list');var fruits = ["桃子","苹果","梨子","香蕉","香瓜","葡萄","柠檬","橘子","草莓","草莓子","我真棒","s","ssr"];//点击事件oBtn.addEventListener('click', function(){var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var fruitList = searchByRegExp(keyWord, fruits);console.log(fruitList);renderFruits(fruitList);// if(!(fruitList instanceof Array)){//return ;//}//oList.innerHTML = '';//var len = fruitList.length;//var item = null;//for(var i=0;i<len;i++){// item = document.createElement('li');// item.innerHTML = fruitList[i];// oList.appendChild(item);//}}, false);//回车查询oTxt.addEventListener('keydown', function(e){if(e.keyCode == 13){var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var fruitList = searchByRegExp(keyWord, fruits);renderFruits(fruitList);}}, false);var cpLock = false;$('#txt').on('compositionstart', function () {cpLock = true;console.log("不搜索")});$('#txt').on('compositionend', function () {cpLock = false;console.log("汉字搜索");var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var fruitList = searchByRegExp(keyWord, fruits);renderFruits(fruitList)});$('#txt').on('input', function () {if (!cpLock) {console.log("字母搜索")var keyWord = oTxt.value;// var fruitList = searchByIndexOf(keyWord,fruits);var fruitList = searchByRegExp(keyWord, fruits);renderFruits(fruitList);}});// 渲染列表function renderFruits(list){if(!(list instanceof Array)){return ;}oList.innerHTML = '';var len = list.length;var item = null;for(var i=0;i<len;i++){item = document.createElement('li');item.innerHTML = list[i];oList.appendChild(item);// ntchild(3)}$("ul>li").on("click",function(){// console.log("item:"+ list[i])alert($(this).text())})}//模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。//模糊查询1:利用字符串的indexOf方法function searchByIndexOf(keyWord, list){if(!(list instanceof Array)){return ;}var len = list.length;var arr = [];for(var i=0;i<len;i++){//如果字符串中不包含目标字符会返回-1if(list[i].indexOf(keyWord)>=0){arr.push(list[i]);}}return arr;}//正则匹配function searchByRegExp(keyWord, list){if(!(list instanceof Array)){return ;}var len = list.length;var arr = [];var reg = new RegExp(keyWord);for(var i=0;i<len;i++){//如果字符串中不包含目标字符会返回-1if(list[i].match(reg)){arr.push(list[i]);}}return arr;}// renderFruits(fruits);</script></body></html>
