Texboxでインクリメンタルサーチ
やっぱりこれがないと不便なので。
https://gyazo.com/1aa205d9b2b2b9376415a65e403e8850
code:script.js
const form = document.getElementById('call-form');
const textbox = document.getElementById("call-box");
const callbtn = document.getElementById("callbutton");
const list = document.getElementById('list');
const incbox = document.getElementById('incrementsearchbox');
const body = document.querySelector('body');
//インクリメンタルサーチ
var data = 'かーそる第五号+ご機嫌で生きる','かーそる第五号+二人のらした、二つのライフ','物書きノート','『認識とパタン』','申請書類ストック','思考の研究','物語とどう付きあうか','祝福（YOASOBI）','歌詞ノート','貴世ジムの契約','教養の研究','「Communicating with Slip Boxes」'; var keyupStack = [];
var keyword = document.getElementById('call-box');
keyword.addEventListener('keyup', function () {
keyupStack.push(1);
setTimeout(function () {
keyupStack.pop();
// 最後にkeyupされてから一定時間次の入力がなかったら実行
if (keyupStack.length === 0) {
// 部分一致を可能にする(例: .*a.*b.*c.*)
var buf = '.*' + this.value.replace(/(.)/g, "$1.*");
var reg = new RegExp(buf);
var filteredLists = data.filter(function (d) {
return reg.test(d);
});
createRow(filteredLists);
}
}.bind(this), 300);
});
var createRow = function (lists) {
const list = document.getElementById('list');
list.textContent = null;
lists.forEach(function (l) {
var li = document.createElement('li');
var sp = document.createElement('span');
sp.classList.add("linkbtn");
sp.textContent = l
li.appendChild(sp);
list.appendChild(li);
});
list.style.display="inline-block";
setOnClickEvent("list");
};
//フォーカスが外れたらインクリメンタルサーチを隠す
body.addEventListener(click, () => {
const act = document.activeElement
console.log(act)
if (act == list){
}else{
list.style.display="none";
}
});
リストのデータはサンプルで。
これを動的に作成できたらGood。
Pythonで、mdファイルの全名前を取得して、それをjsonか何かにする。
より詳しい情報を入れ込んだjsonにすれば、別の用途にも使えるかもしえない。
できれば曖昧検索を可能にしたい。
候補のUl表示のトグルが案外苦労した
blurにすると、クリックでいない。
あとは、上下のカーソルキーでの移動も実現したい。
ref.