基于javascript实现的搜索时自动提示功能

前端技术 2023/09/07 JavaScript

当在数据量不是很大，而且没有后端对应的功能接口的时候，一些简单的搜索功能基本上是前端去实现的，正好最近用到，写了一个，贴出来和大家分享：

效果图：

功能描述：

按下键盘后及时搜索条目中的汉字，汉字对应的拼音和号码；

实现思路：

先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断 input 中的值是汉字，拼音，还是数字，然后按固定的规律去循环数组，这样就能找到对应的条目了；

启用方式：

// search-test-inner --->  最外层div
// search-value --->  input 输入框
// search-value-list --->  搜索结果显示div
// search-li --->  搜索条目
new SEARCH_ENGINE(\"search-test-inner\",\"search-value\",\"search-value-list\",\"search-li\");
注意：搜索条目加上两个临时数据，data-name 和 data-phone ，用来存储汉字和数字。

说明：拼音的转换用到了一个叫 jQuery.Hz2Py-min.js 的插件，由于这个插件只能转换 input 里的值，所以代码里多了一个步骤，先将值放入一个临时的 input ，再转换。

HTML：

复制代码 代码如下:

<div class=\"search-test-inner\">
    <div class=\"search-val-inner\">
        <input type=\"text\" class=\"search-value\" placeholder=\"搜索\">
        <ul class=\"search-value-list\"></ul>
    </div>
    <div class=\"member-list-inner\">
        <ul>
            <li class=\"search-li\" data-name=\"战士\" data-phone=\"13914157895\">
                <span class=\"phone\">13914157895</span>
                <span class=\"name\">战士</span>
            </li>
            <li class=\"search-li\" data-name=\"牧师\" data-phone=\"15112357896\">
                <span class=\"phone\">15112357896</span>
                <span class=\"name\">牧师</span>
            </li>
            <li class=\"search-li\" data-name=\"盗贼\" data-phone=\"13732459980\">
                <span class=\"phone\">13732459980</span>
                <span class=\"name\">盗贼</span>
            </li>
            <li class=\"search-li\" data-name=\"德鲁伊\" data-phone=\"18015942365\">
                <span class=\"phone\">18015942365</span>
                <span class=\"name\">德鲁伊</span>
            </li>
            <li class=\"search-li\" data-name=\"武僧\" data-phone=\"15312485698\">
                <span class=\"phone\">15312485698</span>
                <span class=\"name\">武僧</span>
            </li>
            <li class=\"search-li\" data-name=\"死灵法师\" data-phone=\"13815963258\">
                <span class=\"phone\">13815963258</span>
                <span class=\"name\">死灵法师</span>
            </li>
            <li class=\"search-li\" data-name=\"圣骑士\" data-phone=\"13815934258\">
                <span class=\"phone\">13815934258</span>
                <span class=\"name\">圣骑士</span>
            </li>
        </ul>
    </div>
</div>

CSS:

复制代码 代码如下:

* { padding: 0; margin: 0; }
ol , ul { list-style: none; }
body { font-size: 12px; color:#333; }
.search-test-inner { margin: 100px auto; padding: 10px; width: 400px; background: #e0e0e0; border-radius: 10px; box-shadow: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px; padding: 10px; background: #fff; }
.member-list-inner .search-li { padding: 10px; }
.search-value-list { margin-top: 10px; }
.search-value-list li { padding: 5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { width: 100%; height: 30px; line-height: 30px; }
.tips { font-weight: bold; }

JS:

复制代码 代码如下:

//---------------------------------------------------【初始化】
function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
    //存储拼音+汉字+数字的数组
    this.searchMemberArray = [];
    //作用对象
    this.dom = $(\".\" + dom);
    //搜索框
    this.searchInput = \".\" + searchInput;
    //搜索结果框
    this.searchResultInner = this.dom.find(\".\" + searchResultInner);
    //搜索对象的名单列表
    this.searchList = this.dom.find(\".\" + searchList);
    //转换成拼音并存入数组
    this.transformPinYin();
    //绑定搜索事件
    this.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
    //-----------------------------【转换成拼音，并将拼音、汉字、数字存入数组】
    transformPinYin : function(){
        //临时存放数据对象
        $(\"body\").append(\'<input type=\"text\" class=\"hidden pingying-box\">\');
        var $pinyin = $(\"input.pingying-box\");
        for(var i=0;i<this.searchList.length;i++){
            //存放名字，转换成拼音
            $pinyin.val(this.searchList.eq(i).attr(\"data-name\"));
            //汉字转换成拼音
            var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,\"\");
            //汉字
            var cnCharacter = this.searchList.eq(i).attr(\"data-name\");
            //数字
            var digital = this.searchList.eq(i).attr(\"data-phone\");
            //存入数组
            this.searchMemberArray.push(pinyin + \"&\" + cnCharacter + \"&\" + digital);
        }
        //删除临时存放数据对象
        $pinyin.remove();
    },
    //-----------------------------【模糊搜索关键字】
    fuzzySearch : function(type,val){
        var s;
        var returnArray = [];
        //拼音
        if(type === \"pinyin\"){
            s = 0;
        }
        //汉字
        else if(type === \"cnCharacter\"){
            s = 1;
        }
        //数字
        else if(type === \"digital\"){
            s = 2;
        }
        for(var i=0;i<this.searchMemberArray.length;i++){
            //包含字符
            if(this.searchMemberArray[i].split(\"&\")[s].indexOf(val) >= 0){
                returnArray.push(this.searchMemberArray[i]);
            }
        }
        return returnArray;
    },
    //-----------------------------【输出搜索结果】
    postMemberList : function(tempArray){
        var html = \'\';
        //有搜索结果
        if(tempArray.length > 0){
            html += \'<li class=\"tips\">搜索结果（\' + tempArray.length + \'）</li>\';
            for(var i=0;i<tempArray.length;i++){
                var sArray = tempArray[i].split(\"&\");
                html += \'<li>\';
                html += \'<span class=\"phone\">\' + sArray[2] + \'</span>\';
                html += \'<span class=\"name\">\' + sArray[1] + \'</span>\';
                html += \'</li>\';
            }
        }
        //无搜索结果
        else{
            if($(this.searchInput).val() != \"\"){
                html += \'<li class=\"tips\">无搜索结果……</li>\';
            }else{
                this.searchResultInner.html(\"\");
            }
        }
        this.searchResultInner.html(html);
    },
    //-----------------------------【绑定搜索事件】
    searchActiveEvent : function(){
        var searchEngine = this;
        $(document).on(\"keyup\",this.searchInput,function(){
            //临时存放找到的数组
            var tempArray = [];
            var val = $(this).val();
            //判断拼音的正则
            var pinYinRule = /^[A-Za-z]+$/;
            //判断汉字的正则
            var cnCharacterRule = new RegExp(\"^[\\u4E00-\\u9FFF]+$\",\"g\");
            //判断整数的正则
            var digitalRule = /^[-+]?d+(.d+)?$/;
            //只搜索3种情况
            //拼音
            if(pinYinRule.test(val)){
                tempArray = searchEngine.fuzzySearch(\"pinyin\",val);
            }
            //汉字
            else if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch(\"cnCharacter\",val);
            }
            //数字
            else if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch(\"digital\",val);
            }
            else{
                searchEngine.searchResultInner.html(\'<li class=\"tips\">无搜索结果……</li>\');
            }
            searchEngine.postMemberList(tempArray);
        });
    }
};

效果是不是非常棒呢，小伙伴们美化下就可以用到自己项目中了

本文地址：https://www.stayed.cn/item/18518

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案