查看“︁用户:RedDragon/Test”︁的源代码

<html>

    <div style="margin: 5%">
        <div style="margin-top: 100px; display: flex; justify-content: center; align-items: center">
            <input type="text" id="alias-input"
                style="padding: 0.6rem; background: #ffffff; font-size: 16px; width: 14rem; border-radius:  5px 0 0 5px"
                placeholder="输入曲目名称或别名...">
            <button id="alias-btn"
                style="padding: 0.5rem 1rem; background: #3366CC; color: #ffffff; font-size: 16px; border: none; border-radius: 0 5px 5px 0">搜索</button>
        </div>
        <div style="margin-top: 100px">
            <h3>搜索结果：</h3>
            <div id="alias-results" style="color: #333">
                <div class="no-results"></div>
            </div>
        </div>
        <div style="margin-top: 100px">
            <h3>别名列表：</h3>
            <ul id="all-alias" style="color: #333"></ul>
        </div>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        initAllAliases()

        document.getElementById('alias-btn').addEventListener('click', searchSongs)
        document.getElementById('alias-input').addEventListener('keypress', function (e) {
            if (e.key == 'Enter') searchSongs()
        })
    })

    function initAllAliases() {
        const container = document.getElementById('all-alias')
        container.innerHTML = ''

        songlist.forEach(function (song) {
            const li = document.createElement('li')
            let aliasText = song.aliases && song.aliases.length > 0 ? song.aliases.join('、') : '<span style="color:#888">无别名</span>'
            li.innerHTML = `<span class="song-title">${song.title || ''}</span>: <span class="aliases">${aliasText}</span>`
            container.appendChild(li)
        })
    }

    //计算匹配度，输入的每个字符只能在目标字符串中匹配一次，必须按顺序，每匹配一个字符加1分
    function getMatchScore(input, target) {
        if (!input || !target) return 0
        input = input.toLowerCase()
        target = target.toLowerCase()
        if (input === target) return 100

        let score = 0
        let pos = 0

        for (let i = 0; i < input.length; i++) {
            let found = false
            for (let j = pos; j < target.length; j++) {
                if (input[i] === target[j]) {
                    score += 1
                    pos = j + 1
                    found = true
                    break
                }
            }
            if (!found) break
        }
        return score
    }

    function searchSongs() {
        const searchText = document.getElementById('alias-input').value.trim().toLowerCase()
        const resultsContainer = document.getElementById('alias-results')
        const resc = Number(document.getElementById('score-filter').value) || 2

        if (!searchText) {
            resultsContainer.innerHTML = '<div>输入关键词进行搜索</div>'
            return
        }

        const results = songlist.map(function (song) {
            let maxScore = getMatchScore(searchText, song.title ? song.title.toLowerCase() : '')
            if (song.aliases && song.aliases.length > 0) {
                song.aliases.forEach(function (alias) {
                    maxScore = Math.max(maxScore, getMatchScore(searchText, alias.toLowerCase()))
                })
            }
            return {
                song: song,
                score: maxScore
            }
        }).filter(function (result) {
            // if (result.score >= resc) {
            //     console.log(result.song.title + ": " + result.score)
            // }
            return result.score >= resc
        }).sort(function (a, b) {
            return b.score - a.score
        })

        if (results.length == 0) {
            resultsContainer.innerHTML = '<div class="no-results">没有找到匹配的曲目</div>'
        } else {
            resultsContainer.innerHTML = ''
            results.forEach(function (result) {
                const div = document.createElement('div')
                div.className = 'result-item'
                div.style.margin = "0 0 0.5rem 1rem"
                div.style.lineHeight = "1.5"
                div.innerHTML = '<div class="song-title">' + result.song.title + '</div>' +
                    '<div class="aliases" style="font-size: 13px; margin-left: 1rem">alias: ' +
                    result.song.aliases.join('、') + '</div>'
                resultsContainer.appendChild(div)
            })
        }
    }

    const songlist = [
        {
            title: "Pastel Lines",
            aliases: ["粉彩线条"]
        },
        {
            title: "Gleam feat. ふわまろ",
            aliases: []
        },
        {
            title: "Power Attack",
            aliases: []
        },
        {
            title: "Skyscape",
            aliases: []
        },
        {
            title: "On And On!!",
            aliases: ["oao", "onandon", "上和上", "我们相亲相爱的"]
        },
        {
            title: "Polygons",
            aliases: []
        },
        {
            title: "Abgrund",
            aliases: []
        },
        {
            title: "Journey To The Rainbows",
            aliases: ["彩虹之旅", "彩虹是个好东西"]
        },
        {
            title: "Midnight Flux",
            aliases: []
        },
        {
            title: "NO ONE YES MAN",
            aliases: ["noym", "没一个是人"]
        },
        {
            title: "Clock Paradox",
            aliases: ["时钟悖论", "时悖"]
        },
        {
            title: "F℟IEND",
            aliases: []
        },
        {
            title: "Shattered",
            aliases: []
        },
        {
            title: "Swing Sweet Twee Dance feat. ななきなな",
            aliases: []
        },
        {
            title: "V!rtuaresort",
            aliases: []
        },
        {
            title: "Dice 20",
            aliases: []
        },
        {
            title: "macro.wav",
            aliases: ["宏波", "滴滴滴滴"]
        },
        {
            title: "The Next Arcady",
            aliases: []
        },
        {
            title: "Sakura Fubuki",
            aliases: ["樱吹雪"]
        },
        {
            title: "Tempest",
            aliases: ["风暴"]
        },
        {
            title: "Authentic (Game ver.)",
            aliases: []
        },
        {
            title: "MilK",
            aliases: ["牛奶"]
        },
        {
            title: "ILLEGAL LEGACY",
            aliases: ["il", "非法遗产"]
        },
        {
            title: "竹",
            aliases: []
        },
        {
            title: "R.I.P.",
            aliases: ["rip"]
        },
        {
            title: "Empire",
            aliases: []
        },
        {
            title: "DropDown",
            aliases: []
        },
        {
            title: "Contact",
            aliases: []
        },
        {
            title: "CANDYLAND",
            aliases: []
        },
        {
            title: "Arcade ViruZ",
            aliases: ["街机病毒"]
        },
        {
            title: "LINK x LIN＃S",
            aliases: []
        },
        {
            title: "LEONIDS",
            aliases: ["狮子座", "星座"]
        },
        {
            title: "FORTALiCE",
            aliases: []
        },
        {
            title: "Paradial Resonator",
            aliases: []
        },
        {
            title: "Lavender Leaf (feat. Lexi)",
            aliases: []
        },
        {
            title: "Puppet Show",
            aliases: []
        },
        {
            title: "Vicious Mockery",
            aliases: ["vm"]
        },
        {
            title: "BRAVE: ROAD",
            aliases: ["br", "勇气之路", "勇敢之路", "勇路"]
        },
        {
            title: "Dot-Line (feat. ななひら)",
            aliases: ["点线"]
        },
        {
            title: "光 (阿卡姆巫师 Remix)",
            aliases: []
        },
        {
            title: "Lost Future",
            aliases: ["失落未来"]
        },
        {
            title: "sAtElLites",
            aliases: ["卫星"]
        },
        {
            title: "Intruder",
            aliases: []
        },
        {
            title: "Rule The World",
            aliases: []
        },
        {
            title: "felys -final remix-",
            aliases: []
        },
        {
            title: "Destr0yer",
            aliases: ["d0"]
        },
        {
            title: "crystallized",
            aliases: ["结晶"]
        },
        {
            title: "Cosmos Capsule",
            aliases: []
        },
        {
            title: "Yellow Shining!! feat. 成田なる",
            aliases: []
        },
        {
            title: "Abatement",
            aliases: []
        },
        {
            title: "Rapture",
            aliases: []
        },
        {
            title: "Turning POINT",
            aliases: []
        },
        {
            title: "Reversed Zenith",
            aliases: []
        },
        {
            title: "Restricted Access",
            aliases: []
        },
        {
            title: "The Last Page",
            aliases: []
        },
        {
            title: "Super Universe (Knighthood Remix)",
            aliases: ["超宇宙", "Super Universe Remix"]
        },
        {
            title: "Enneaquest",
            aliases: []
        },
        {
            title: "Colorful Flavor",
            aliases: []
        },
        {
            title: "Abiogenesis",
            aliases: ["无生源论"]
        },
        {
            title: "Revenant",
            aliases: []
        },
        {
            title: "Antler",
            aliases: ["鹿角"]
        },
        {
            title: "Contortion",
            aliases: []
        },
        {
            title: "Bring Me Back",
            aliases: []
        },
        {
            title: "Hullbreaker",
            aliases: []
        },
        {
            title: "D-Birth",
            aliases: []
        },
        {
            title: "NightTheater",
            aliases: ["夜剧场", "夜剧院", "NT"]
        },
        {
            title: "Grimheart",
            aliases: ["冷酷的心", "寒冷的心", "冷心"]
        },
        {
            title: "Encrux",
            aliases: []
        },
        {
            title: "slic.hertz",
            aliases: []
        },
        {
            title: "Giselle",
            aliases: []
        },
        {
            title: "Afterdark",
            aliases: []
        },
        {
            title: "蒼天 (Sta's Key-Kai mix)",
            aliases: ["苍天"]
        },
        {
            title: "Conway's Child",
            aliases: ["康威之子"]
        },
        {
            title: "Crimsonate",
            aliases: []
        },
        {
            title: "Sthenno",
            aliases: []
        },
        {
            title: "Kaguya",
            aliases: []
        },
        {
            title: "Relieve",
            aliases: []
        },
        {
            title: "Alexandrite",
            aliases: ["变石"]
        },
        {
            title: "Hydra",
            aliases: []
        },
        {
            title: "漂流",
            aliases: []
        },
        {
            title: "Comet Coaster",
            aliases: []
        },
        {
            title: "DOMINATOR",
            aliases: []
        },
        {
            title: "天灵灵地灵灵",
            aliases: []
        },
        {
            title: "Psychometry",
            aliases: []
        },
        {
            title: "Electric Comet",
            aliases: []
        },
        {
            title: "Eschatology",
            aliases: ["末世论"]
        },
        {
            title: "너를 그리는 밤하늘의 이야기 (Planetarium) prod. Scarlette",
            aliases: []
        },
        {
            title: "Avataar ~Reincarnation of Kalpa~",
            aliases: []
        },
        {
            title: "Frozen Heart",
            aliases: []
        },
        {
            title: "amethyst",
            aliases: ["紫水晶"]
        },
        {
            title: "Alfheim's faith",
            aliases: []
        },
        {
            title: "翠杜",
            aliases: []
        },
        {
            title: "驟雨の狭間",
            aliases: ["骤雨狭间", "骤雨的缝隙"]
        },
        {
            title: "enchanted love",
            aliases: []
        },
        {
            title: "Crazy Audiophile",
            aliases: []
        },
        {
            title: "419kB",
            aliases: []
        },
        {
            title: "VICIOUS",
            aliases: []
        },
        {
            title: "Crush Alcohol",
            aliases: []
        },
        {
            title: "インフェルノシティ",
            aliases: ["地狱城", "地狱都市"]
        },
        {
            title: "No-name Requiem",
            aliases: ["无名安魂曲"]
        },
        {
            title: "Change the Game feat. 松永依織",
            aliases: []
        },
        {
            title: "T+ VS SHARK",
            aliases: ["OMG!!!  It's a SHARK!!!"]
        },
        {
            title: "Future Downloader",
            aliases: ["未来下载器"]
        },
        {
            title: "Echo over you...",
            aliases: []
        },
        {
            title: "Fairy's Crown",
            aliases: []
        },
        {
            title: "Graves -Ancient Memories-",
            aliases: []
        },
        {
            title: "Clouds clear and...",
            aliases: []
        },
        {
            title: "NLAMTA",
            aliases: []
        },
        {
            title: "Antikythera",
            aliases: []
        }
    ]

</script>

</html>