前端实现搜索功能和模糊查询

前端实现搜索功能和模糊查询

功能介绍：

在前端实现搜索，获取数据部分可以用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++){
                                //如果字符串中不包含目标字符会返回-1
                                if(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++){
                                //如果字符串中不包含目标字符会返回-1
                                if( 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 2016-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++){
            //如果字符串中不包含目标字符会返回-1
            if(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++){
            //如果字符串中不包含目标字符会返回-1
            if(list[i].match(reg)){
                arr.push(list[i]);
            }
        }
        return arr;
    }
    // renderFruits(fruits);
</script>
</body>
</html>