簡易的なサイト内検索を作りたい

Question

様々な企業が提供しているカスタム検索を使わずに簡易的な検索機能をサイトに設置したい

やりたいこと、考えていること→

フォームに入力された文字列を別の値に内部で変換し◯◯の部分に置き換え、ボタンで組み立てられたそのリンクに移動

例（フォームの値→変換する値）
トランペット→b001
チューバ→b002
バイオリン→s001
etc...

https://xxxxxx.com/searchbaffar/◯◯.html

or検索やand検索などは考えておりません

*可能であれば部分一致は作りたい
*ファイル内の文字ではなくファイル名を検索の判定にかけたい
*検索結果は別ページに表示したい
*静的サイトに設置したい

この方法以外に簡単な作り方や多機能を持たせられる作り方などありましたらどこがどう機能するのかを含め教えていただきたいです

Comments

[kyoya0819]

もし、完全一致だけですか？
それとも一部一致も含めますか？その場合複数あるときはどうしますか？

[退会済みユーザー]

可能であれば部分一致は含めたいです
複数ある場合はリスト化したいです

[m.ts10806]

静的サイトですよね

[m.ts10806]

要件部分はコメントに書くのではなく質問本文に追記願います

[makosankibu]

質問が受付中になっていますが、ベストアンサーを決めたらどうでしょうか

Answer 1

とりあえず、部分一致したもののリンクを貼る方法で

ここまで出てるんで、ご自身でやって欲しいというのが本心ですが、一応書いておきますが、未テストなので動かない可能性があります。

<!--search.html-->
<input type=text id=tags><input type=button id=search value=検索>

<!--result.html-->
<div id=result></div>

// search.htmlに読み込む
search.onclick = function () { 
  location.href = 'search.html?word=' + encodeURI(tags.value);
};

// result.htmlに読み込む
var tags = [
  ['バイオリン','s001'],
  ['トランペット','b001'],
  ['チューバ','b002']
];

window.onload = function () { 
  var result = '';
  var value = decodeURI(new URLSearchParams(window.location.search).get('word'));
  for(i=0;i<tags.length;i++){
    if(tags[i][0].indexOf(value)!=-1){
      result += '<a href=' + tags[i][1] + '>' + tags[i][0] + '</a> ';
    }
  }
  document.getElementById('result').innerHTML = result;
};

サンプル

Comments

[退会済みユーザー]

ボタンをクリックしたら別のページに検索結果を出力したいです

[kyoya0819]

一応追記しておきます。動かない可能性があるのでご了承を

[kyoya0819]

コードを提示したらそれで終わりですか...

[退会済みユーザー]

返信遅れて申し訳ありません
検索結果のリストアップデザインについて試行錯誤してみたいのですが、どこをどの様に変更すれば良いですか？
検索結果のリストにCSSの影響を与えることはできますか？

[kyoya0819]

result.htmlに指定していく形になるとおもいます。

Answer 2

Google先生に「webアプリ 検索機能 javascript」と検索して一番上にあったサイトを貼っておきます。

JavaScriptでサイト内検索ボックスの作り方

実際に手を動かしながらコードを模写すると動きが分かってくるかと思います。

Answer 3

スマホからなので簡単に。

https://www.ideaxidea.com/archives/2013/09/client_side_search.html

考え方を変えて、リンク集をフィルターするのもありかと。結果的に検索と似た効果が期待で来ると思います。

メリットは
0. リンク集のメンテナンスはhtmlが書ける人に任せられる
0. メンテナンス後の動作確認が楽
0. data属性に検索対象にしたいキーワードを入れるので、全文検索ぽい検索も可能