Javascriptでサイト内検索するモジュール

JavaScriptでサイト内検索するモジュールを作りました。
ヘルプ画面の検索機能とUIとして使うことを目的としています。
node.js + express.jsから、JSONデータをクライアントに送信します。

GitHubで公開しています。
https://github.com/hiro-yano/insitesearch

デモサイトは以下です。
https://insitesearch.herokuapp.com/index.html

画像のように
上部の検索バーに、サイト内で検索したいワードを入力すれば、
検索結果が表示されます。

【使い方】
js/search-result-card.js:

  • search-result-card.jsが、サイト内で検索したいワードをnode.jsに渡します。

上の画像のようにカード形式で検索結果を表示してくれます。

  • 検索対象のページの指定方法
./server.js
  var pageList = ['index', 'orders', 'products', 'customers', 'reports', 'integrations']; //ここに、サイト各ページのurlのリストを入力してください。

上のソースコードで、
var pageList = ['index', 'orders', 'products', 'customers', 'reports', 'integrations']; に
検索対象ページのファイル名(.htmlの拡張子は除く)のリストを入力してください。
上の例は、検索対象ページのファイル名がindex.html、orders.html、products.html、reports.html、integrations.htmlの場合です。

  • カード形式で検索結果を表示するために、BootStrapを使っています。
  • カード形式以外の表示形式にしたい場合、BootStrapを使わない場合のカスタマイズ方法

laod_html_and_insert_success関数で、カード形式で検索結果を表示できるようにしているので、
表示形式をカスタマイズしたい場合は、ここを編集してください。

js/search-light.js:

  • search-light.jsは下の画像のように、ページ内の検索キーワードをすべてハイライトしてくれます。

https://insitesearch.herokuapp.com/index.html?

のように、urlのファイル名のあとに、?(検索キーワード)のように指定すると、
ページ内の検索キーワードをすべてハイライトしてくれます。