javascript - js 模糊查询

问题描述

问 题

根据返回的数据，大概如下。要求是输入Y或者y 显示牙刷 浴巾 输入ys或YS显示牙刷。输入牙显示牙刷 牙具
输入牙刷 显示牙具
自己写了一下午准备做个插件方便以后用 最后发现有不少bug 搞不定了来求救。li模拟的option
哪位好心人帮帮忙实现个demo

var data = {
    "state": "0",
    "data_list": [{
        "id": "1",
        "title": "牙刷",
        "Ne": "YS",
        "mNe": "ys",
    }, {
        "id": "2",
        "title": "毛巾",
        "Ne": "MJ",
        "mNe": "mj",
    }, {
        "id": "3",
        "title": "变形金刚",
        "Ne": "BXJG",
        "mNe": "bxjg",
    }, {
        "id": "4",
        "title": "浴巾",
        "Ne": "YJ",
        "mNe": "yj",
    }, {
        "id": "5",
        "title": "洗发水",
        "Ne": "XFS",
        "mNe": "xfs",
    }, {
        "id": "6",
        "title": "沐浴露",
        "Ne": "MYL",
        "mNe": "myl",
    }, {
        "id": "7",
        "title": "纸杯",
        "Ne": "ZB",
        "mNe": "zb",
    }, {
        "id": "8",
        "title": "内裤",
        "Ne": "NK",
        "mNe": "nk",
    }, {
        "id": "9",
        "title": "洗面奶",
        "Ne": "XMN",
        "mNe": "xmn",
    }, {
        "id": "10",
        "title": "牙具",
        "Ne": "YJ",
        "mNe": "yj",
    }, {
        "id": "11",
        "title": "内衣",
        "Ne": "NY",
        "mNe": "ny"
    }, {
        "id": "12",
        "title": "原味内衣",
        "Ne": "YWNY",
        "mNe": "ywny"
    }]
}

解决方案

        <input type="search" id="search" placeholder="请输入关键字" />
        <ul id="list"></ul>
        <script type="text/javascript">
            window.onload = function(){
                    //数据列表
                    var data = {
                        "state": "0",
                        "data_list": [{
                            "id": "1",
                            "title": "牙刷",
                            "Ne": "YS",
                            "mNe": "ys",
                        }, {
                            "id": "2",
                            "title": "毛巾",
                            "Ne": "MJ",
                            "mNe": "mj",
                        }, {
                            "id": "3",
                            "title": "变形金刚",
                            "Ne": "BXJG",
                            "mNe": "bxjg",
                        }, {
                            "id": "4",
                            "title": "浴巾",
                            "Ne": "YJ",
                            "mNe": "yj",
                        }, {
                            "id": "5",
                            "title": "洗发水",
                            "Ne": "XFS",
                            "mNe": "xfs",
                        }, {
                            "id": "6",
                            "title": "沐浴露",
                            "Ne": "MYL",
                            "mNe": "myl",
                        }, {
                            "id": "7",
                            "title": "纸杯",
                            "Ne": "ZB",
                            "mNe": "zb",
                        }, {
                            "id": "8",
                            "title": "内裤",
                            "Ne": "NK",
                            "mNe": "nk",
                        }, {
                            "id": "9",
                            "title": "洗面奶",
                            "Ne": "XMN",
                            "mNe": "xmn",
                        }, {
                            "id": "10",
                            "title": "牙具",
                            "Ne": "YJ",
                            "mNe": "yj",
                        }, {
                            "id": "11",
                            "title": "内衣",
                            "Ne": "NY",
                            "mNe": "ny"
                        }, {
                            "id": "12",
                            "title": "原味内衣",
                            "Ne": "YWNY",
                            "mNe": "ywny"
                        }]
                    }
                //动态生成列表
                var search = document.getElementById('search');
                var list = document.getElementById('list');
                search.oninput = function(){
                    list.innerHTML = '';
                    var text = search.value;
                    var length = text.length;
                    for(var i in data.data_list){
                        if(data.data_list[i].title.substring(0,length).indexOf(text) != -1
                            ||data.data_list[i].Ne.substring(0,length).indexOf(text) != -1
                            ||data.data_list[i].mNe.substring(0,length).indexOf(text) != -1
                        ){
                            list.innerHTML += '<li id="'+data.data_list[i].id+'">'+data.data_list[i].title+'</li>'
                        }
                    }
                }
                //点击列表中的数据获取其ID
                list.onclick = function(e){
                    if(e.target.nodeName == 'LI'){
                        alert(e.target.id);
                    };
                }
            }
        </script>

不知道是不是楼主要的效果，input中的值可以用正则去掉特殊字符，样式就不写了哈!

这篇关于javascript - js 模糊查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！