模式 · 来自 长文发布
设置搜索
搜索框钉在设置页顶部（⌘F 跳过来，Esc 清空）：过滤到匹配的行并标出字；每行带几个别人可能搜的词（暗色 / dark / 夜间 都能找到主题）。
演示
外观
主题
亮 · 暗 · 跟随系统
圆角
写入
智能标点
<div style="max-width:440px">
<div class="xxd-input-wrap" style="margin-bottom:16px"><i data-xxd-icon="Search" data-size="16"></i><input class="xxd-input" type="search" id="ss-input" placeholder="搜索设置（⌘F）" aria-label="搜索设置"><button class="xxd-input-clear" aria-label="清空"><i data-xxd-icon="X" data-size="14"></i></button></div>
<div class="xxd-settings" id="ss-box">
<section class="xxd-group"><h2 class="xxd-group__title">外观</h2><div class="xxd-group__body">
<div class="xxd-row" data-keywords="暗色 dark 夜间 主题"><div class="xxd-row__text"><div class="xxd-row__title">主题</div><div class="xxd-row__desc">亮 · 暗 · 跟随系统</div></div></div>
<div class="xxd-row" data-keywords="圆角 rounded 直角"><div class="xxd-row__text"><div class="xxd-row__title">圆角</div></div><div class="xxd-row__control"><input type="checkbox" role="switch" class="xxd-switch" aria-label="圆角"></div></div>
</div></section>
<section class="xxd-group"><h2 class="xxd-group__title">写入</h2><div class="xxd-group__body">
<div class="xxd-row" data-keywords="标点 引号 punctuation"><div class="xxd-row__text"><div class="xxd-row__title">智能标点</div></div><div class="xxd-row__control"><input type="checkbox" role="switch" class="xxd-switch" checked aria-label="智能标点"></div></div>
</div></section>
</div>
</div>
<script>Xxd.bindSettingsSearch(document.getElementById("ss-input"), document.getElementById("ss-box"), { hotkey: false });</script>规则
- 没有匹配的行和整组藏起来
- 放在别处的设置也作为捷径出现在结果里
JS
Xxd.bindSettingsSearch(input, settingsContainer)