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