QkVEfvCtdIL82Q9.jpg

HTML 部分代码

<select id="select">
    <option value="none">🏦 ... 银行</option>
    <option value="zgyh">中国银行</option>
    <option value="jsyh">建设银行</option>
    <option value="gsyh">工商银行</option>
    //...
</select>
<input id="search-query" name="q" type="text" placeholder="🔍️ 查询...">
<figcaption id="search-infos"></figcaption>
<div id="search-results">中国现代化支付 (CNAPS CODE) <strong>联行号查询</strong></div>
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mark.js/dist/mark.min.js"></script>

JS 部分代码

var docinfo = document.getElementById("search-infos");
var docresult = document.getElementById("search-results");
var inputBox = document.getElementById("search-query");
document.getElementById("select").addEventListener("change", function(e) {
    if (e.target.tagName == "SELECT") {
        console.log("radiovalue", e.target.value)
        if (e.target.value == "none") {
            docinfo.innerHTML = "⚠ 请先选择银行，再输入关键字进行查询！";
        } else {
            var urlData = e.target.value;
            async function getData(url = '') {
                const response = await fetch(url, { cache: "no-cache" });
                if (!response.ok) {
                    docinfo.innerHTML = "⚠ 数据加载故障，请检测网络！" + response.status;
                } else {
                    return await response.json();
                }
            }
            // async function getData(url = '') {
            //     // Default options are marked with *
            //     const response = await fetch(url);
            //     return response.json(); // parses JSON response into native JavaScript objects
            // }
            // JSON data parsed by `data.json()` call
            getData(urlData + '.json')
                .then(data => {
                    // console.log(data); 
                    const list = data;
                    console.log(list);
                    const options = {
                        isCaseSensitive: false,
                        includeScore: true,
                        shouldSort: true,
                        includeMatches: false,
                        findAllMatches: false,
                        minMatchCharLength: 2,
                        location: 0,
                        threshold: 0.1, //适用于中文的模糊搜索设置
                        distance: 10000,
                        useExtendedSearch: false,
                        ignoreLocation: false,
                        ignoreFieldNorm: true,
                        // keys: [
                        //     "title",
                        //     "author.firstName"
                        // ]
                    }

                    const fuse = new Fuse(list, options);
                    docinfo.innerHTML = "✔ 数据加载完成！";
                    // 监听键盘回车键触发搜索事件
                    document.onkeydown = function(event) {
                        e = event ? event : (window.event ? window.event : null);
                        if (e.keyCode == 13) {
                            setTimeout(searchq, 1000); //开启异步子线程
                            docinfo.innerHTML = "⏳ 努力查询中，精彩即将呈现！";
                        }
                    }

                    function searchq() {
                        if (inputBox.value !== null) {
                            var result = fuse.search(inputBox.value);
                            if (result.length == 0) {
                                docinfo.innerHTML = '<div>' + "⚠ 查询结果为空，请检测关键字是否正确！" + '</div>';
                            } else {
                                var resultStr = "";
                                // (let i = 0; i < result.length; i++)
                                for (let i in result) {
                                    resultStr += '<div>◾ ' + result[i].item + '</div>';
                                    console.log(result[i].item);
                                }
                                docresult.innerHTML = resultStr;
                                var instance = new Mark(document.getElementById("search-results"));
                                // 高亮显示搜索结果内关键字
                                instance.mark(inputBox.value, {
                                    // "element": "span",
                                    // "className": "highlight"
                                });
                            }
                        }
                    }
                });
        }
    }
});