検索候補のフォントサイズを調整するUserScript

改善希望

イメージ：「カント」と検索窓に入れた時の検索候補（サジェスト）の一部

https://gyazo.com/55a58eb3b720a759704fb75b3b40249e

検索候補のバイト数に応じてフォントサイズを3段階で変える

code:script.js

/* バイト数を数えられるようにする */

String.prototype.byte = function() {

return encodeURIComponent(this).replace(/%../g,'x').length

}

code:script.js

// 検索窓

const form = document.querySelector('.form-group');

// バイト数の設定（min以下なら何もしない。min<バイト<=maxなら少し小さく。maxより長いと最小にする）

const min = 57;

const max = 72; // or 68

form.addEventListener('keyup', e => {

let items = form.querySelectorAll('ul li a')

items.forEach(item=>{

// 検索候補の文字数をバイト数で取得

let len = item.text.byte()

//console.log(len, item.text)

// 文字数に応じてフォントサイズを変更する

if(len > min && len <= max) {

item.setAttribute('style', 'font-size: 0.9em')

console.log(item)

} else if(len > max) {

item.setAttribute('style', 'font-size: 1px') // or 0.5em

console.log(item)

}

})

})

2022/3/27 全面的に書き直した