JS 数组模糊搜索

本文介绍了一种用于在对象列表中搜索指定字符串的算法实现。该算法通过比较字符串的首字符来匹配对象属性,并完整地返回所有匹配项。适用于前端开发中的快速筛选需求。
function searchList(str, container) {
    var newList = [];
    //新的列表
    var startChar = str.charAt(0);
    //开始字符
    var strLen = str.length;
    //查找符串的长度


    for (var i = 0; i < container.length; i++) {
        var obj = container[i];
        var isMatch = false;
        for (var p in obj) {
            if (typeof (obj[p]) == "function") {
                obj[p]();
            } else {
                var curItem = "";
                if (obj[p] != null) {
                    curItem = obj[p];
                }
                for (var j = 0; j < curItem.length; j++) {
                    if (curItem.charAt(j) == startChar)
                    {
                        if (curItem.substring(j).substring(0, strLen) == str)
                        {
                            isMatch = true;
                            break;
                        }
                    }
                }
            }
        }
        if (isMatch) {
            newList.push(obj);
        }
    }
    return newList;
}
在 UniApp 中实现三级数组的模糊搜索功能,可以通过递归处理和 JavaScript数组方法来完成。模糊搜索的核心在于对每一级数组进行筛选,并保留符合条件的子结构。以下是具体实现方法: ### 三级数组结构示例 假设三级数组结构如下: ```json [ { "name": "一级分类1", "children": [ { "name": "二级分类1", "children": [ { "name": "三级分类1" }, { "name": "三级分类2" } ] } ] }, { "name": "一级分类2", "children": [ { "name": "二级分类2", "children": [ { "name": "三级分类3" }, { "name": "三级分类4" } ] } ] } ] ``` ### 实现模糊搜索的方法 模糊搜索的核心在于递归处理每一级的 `children`,并根据关键词进行过滤。以下是一个完整的实现示例: ```javascript function fuzzySearch(array, keyword) { // 如果关键词为空,则返回原始数组 if (!keyword) return array; // 过滤并递归处理数组 return array.filter(item => { const match = item.name.includes(keyword); if (item.children) { item.children = fuzzySearch(item.children, keyword); } return match || (item.children && item.children.length > 0); }); } ``` ### 在 UniApp 中使用 在 UniApp 的页面中,可以将上述函数封装为方法,并结合 `v-model` 来实现输入框的实时搜索功能。 #### 模板部分 ```html <template> <view> <input v-model="searchKeyword" placeholder="请输入搜索关键词" /> <block v-for="item in filteredList" :key="item.name"> <view>{{ item.name }}</view> <block v-if="item.children" v-for="child in item.children" :key="child.name"> <view style="margin-left: 20px;">{{ child.name }}</view> <block v-if="child.children" v-for="grandchild in child.children" :key="grandchild.name"> <view style="margin-left: 40px;">{{ grandchild.name }}</view> </block> </block> </block> </view> </template> ``` #### 脚本部分 ```javascript <script> export default { data() { return { searchKeyword: '', originalList: [ { "name": "一级分类1", "children": [ { "name": "二级分类1", "children": [ { "name": "三级分类1" }, { "name": "三级分类2" } ] } ] }, { "name": "一级分类2", "children": [ { "name": "二级分类2", "children": [ { "name": "三级分类3" }, { "name": "三级分类4" } ] } ] } ] }; }, computed: { filteredList() { return fuzzySearch(this.originalList, this.searchKeyword); } } }; // 模糊搜索函数 function fuzzySearch(array, keyword) { if (!keyword) return array; return array.filter(item => { const match = item.name.includes(keyword); if (item.children) { item.children = fuzzySearch(item.children, keyword); } return match || (item.children && item.children.length > 0); }); } </script> ``` ### 说明 1. **数据结构**:使用嵌套的 JSON 结构表示三级分类。 2. **递归过滤**:通过递归调用 `fuzzySearch` 方法,对每一级的 `children` 进行过滤。 3. **动态绑定**:利用 Vue.js 的 `v-model` 和计算属性 `filteredList` 实现实时搜索。 4. **渲染**:通过 `v-for` 和缩进样式展示三级结构。 ### 优化建议 - **性能优化**:如果数据量较大,可以考虑对搜索进行防抖处理,避免频繁触发搜索。 - **匹配精度**:可以使用正则表达式或更复杂的模糊匹配算法(如 [Fuse.js](https://fusejs.io/))提升搜索的准确性。 这种方法可以灵活地扩展到更多层级,并且适用于 UniApp 的多端部署场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值