前端JavaScript實(shí)現本地模糊搜索功能的方法實(shí)例

目錄

一、項目前景

隨著(zhù)vue、react在實(shí)際開(kāi)發(fā)中應運越來(lái)越廣泛，前端對數據的處理越來(lái)越多。這篇文章主要目的就是為了對服務(wù)端返回的數據進(jìn)行處理，按照條件進(jìn)行模糊查詢(xún)，從而減少向服務(wù)端發(fā)送請求的次數，來(lái)提高性能和用戶(hù)體驗。下面以一個(gè)簡(jiǎn)單的DEMO,來(lái)實(shí)現模糊查詢(xún)的功能：

測試用的數據如下：

var data = [{
            "title": "你的失戀修復期有多長(cháng)？",
            "title_image": "https://img.doutuimao.net/dtmimg/b7c9ec393414982682e5a477eb995b55",
            "desc": "美食餐飲測試一下你的失戀修復期有多長(cháng)",
            "id": "2",
            "num": 951357,
            "flag": "01"
    },
    {
            "title": "你的撒嬌指數有多高？",
            "title_image": "https://img.doutuimao.net/dtmimg/60d8ed86d1f72357c194506270c72ac1",
            "desc": "美食餐飲會(huì )撒嬌的女人最好命，你有多會(huì )撒嬌？你撒起嬌來(lái)魅力又是怎么樣的？快來(lái)測測吧！",
            "id": "3",
            "num": 963258,
            "flag": "01"
    },
    {
            "title": "你未來(lái)的結婚方式？",
            "title_image": "https://img.doutuimao.net/dtmimg/538632e75159ce8e586778d289c66a11",
            "desc": "相信很多人都對自己未來(lái)的結婚方式充滿(mǎn)期待，想知道你未來(lái)的結婚方式嗎？",
            "id": "4",
            "num": 879564,
            "flag": "01"
    },
]

二、涉及知識點(diǎn)

Object.assign()的用法

Object.assign方法用來(lái)將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。它至少需要兩個(gè)對象作為參數，第一個(gè)參數是目標對象，后面的參數都是源對象。

// 處理原始數組
let arrnew = data.map((item, index) => {
    return Object.assign({}, {
            'desc': item.desc,
    })
})

filter()方法

filter()方法用于過(guò)濾數組元素。該方法創(chuàng )建一個(gè)新數組, 其中包含通過(guò)所提供函數實(shí)現的測試的所有元素。filter()不會(huì )對空數組進(jìn)行檢測，也不會(huì )改變原始數組。

indexOf()模糊查詢(xún)

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現的位置。如果要檢索的字符串值沒(méi)有出現，則該方法返回 -1。與filter()方法配合，可以檢測數組中是否包含輸入的值，并返回。

var newData = arrnew.filter(item => {
    if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值為0
            return item
    }
    return newData
})

DEMO完整代碼如下：

<div class="wrap">
        <input type="text" id="demo">
        <ul id="newsBox">
        </ul>
</div>
function creat() {
        var value = input.value;
        var html = "";
        let arrnew = data.map((item, index) => {
                return Object.assign({}, {
                        'desc': item.desc,
                })
        })

        var newData = arrnew.filter(item => {
                if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值為0
                        return item
                }
                return newData
        })


        if (newData.length > 0) {
                for (var i = 0; i < newData.length; i++) {
                        html += `<li>${newData[i].desc}</li>`
                }
        } else {
                html += `<li>暫無(wú)數據</li>`
        }
        ul.innerHTML = html;
}
creat()
input.onchange = function(e) {
        creat()
}

總結

到此這篇關(guān)于JavaScript實(shí)現本地模糊搜索功能的文章就介紹到這了,更多相關(guān)JS本地模糊搜索內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！