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">中國現(xiàn)代化支付 (CNAPS CODE) <strong>聯(lián)行號查詢</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 = "? 數(shù)據(jù)加載故障，請檢測網(wǎng)絡！" + 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 = "? 數(shù)據(jù)加載完成！";
                    // 監(jiān)聽鍵盤回車鍵觸發(fā)搜索事件
                    document.onkeydown = function(event) {
                        e = event ? event : (window.event ? window.event : null);
                        if (e.keyCode == 13) {
                            setTimeout(searchq, 1000); //開啟異步子線程
                            docinfo.innerHTML = "? 努力查詢中，精彩即將呈現(xiàn)！";
                        }
                    }

                    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"));
                                // 高亮顯示搜索結果內(nèi)關鍵字
                                instance.mark(inputBox.value, {
                                    // "element": "span",
                                    // "className": "highlight"
                                });
                            }
                        }
                    }
                });
        }
    }
});