JS memo

お洒落にJavaScript。

2019年2月12日8:18

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

メインビジュアル

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

最近SEO対策でも何かと話題のサイト内検索エンジンですが、Googleが提供するカスタム検索を利用すれば簡単に自分のサイトに設置することができます。
が、しかし既存のツールで検索エンジンを設置するのは簡単すぎて何か物足りない!と言うことでJavaScriptを使って自作のサイト内検索ボックスを作成して見ました。

目次
  1. 作成するサイト内検索の概要
  2. サイト内検索の作成方法
  3. まとめ

作成するサイト内検索の概要

まずはデモをご覧ください。
「JavaScript」などのワードを入れて検索するとこのサイト内で検索されたキーワードを含むページを表示します。
※検索後結果一覧ページに遷移します

今回は予測変換や複数キーワードなどの検索機能はついていない、ごくごく単純なサイト内検索を作成します。
さらなる性能を持ったサイト内検索ボックスについてはまた後日作成したいと思います。

サイト内検索の作成方法

1.検索ボックスのフレーム

まず、サイト内検索ボックスを設置するページの実装から見ていきましょう。

search.html

<form action="/search-result/">
  <input id="search-input" placeholder="1つキーワードを入力" type="text" name="search-key">
  <input id="search-buttom" class="fas" type="submit" value="" method="get">
</form>

formタグの中にキーワードを入力する枠と検索ボタンの二つのinputタグを設置します。

それぞれの属性は表にまとめました。

タグ属性内容
formaction結果を表示したいページを設定する
inputplaceholderデフォルトで検索ボックスに入れる文字
inputtype入力型を指定する
inputname入力されたデータに付ける名前
inputmethodデータの送信方法

キーワードを入力するinputで入力された文字が、二つ目のinputをクリックされると、search-keyにキーワードの値が代入されます。
そして入力されたキーワードの値を持つsearch-keyは結果を表示するページにパラメーター(?search-key=キーワード)の形で送信されます。

でもではこんな感じ▼

【https://yukimonkey.com/search-result/?search-key=キーワード

デザインについてはお好みでカスタマイズしてください。

2. 検索ボタンのクリック後に表示する一覧ページでの実装

結果一覧ページではまずキーワードを含むページを表示するためのhtmlを作成しておきます。

result.html(結果を表示するページ)

<div class="contents">
  <h1>検索結果</h1>
  <ul id="ul">
  </ul>
</div>

次に検索結果を表示させるページにパラーメーターで付与されたキーワードをJavascriptのAjax(jQuery)のGETメソッドで取得し、
サイト内ページで「検索してね!」と指示した全てのページからそのキーワードを含むページを表示します。

今回ajaxを登録したページ分ループしなければいけなかったのでXMLHttpRequestでの実装がややこしいため、 jQueryを使用しました。

XMLHttpRequestを複数回利用するときのエラーについてはこちらをご覧ください。


result.html(結果を表示するページ)

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
 //URLのパラメーターを取得
  let v = new URLSearchParams(window.location.search);
 //URLのパラメーターのうち検索されたキーワードを取得
  v = v.get('search-key');
 //検索したい全てのURLを配列に格納
  const urlLists = [
    "/data/xml/",
    "/site-speed/asynchronous/",
    "/site-speed/for_while/",
    "/site-speed/async-2/"];
  $.each(urlLists, function(i){
    $.ajax({
      url : urlLists[i],
      dataType : 'html',
      success : function(data){
      //上記のURLからキーワードを探す
        if( $(data).find("#article").text().indexOf(v) !== -1){
      //あれば、ページを表示する
          $('<li><a href="' + urlLists[i] + '">' +$(data).find("h1").text() + '</a></li>').appendTo('ul');
          }
        },
        error: function(data){
          console.log("error")
        }
      });
    });
</script>

上記のJSを順に説明します。

まず先ほどのキーワードを取得して変数vに収めます。

let v = new URLSearchParams(window.location.search);
v = v.get('search-key');

次に、検索したいページのリストを作成します。

const urlLists = [
  "/data/xml/",
  "/site-speed/asynchronous/",
  "/site-speed/for_while/",
  "/site-speed/async-2/"];

そして、その各々のページ内にキーワードが含まれているか調査し、あれば、先ほど結果を表示するために作成したhtmlに表示するよう操作します。

$.each(urlLists, function(i){
  $.ajax({
    url : urlLists[i],
    dataType : 'html',
    success : function(data){
        if( $(data).find("#article").text().indexOf(v) !== -1){
          $('<li><a href="' + urlLists[i] + '">' +$(data).find("h1").text() + '</a></li>').appendTo('ul');
        }
    },
    error: function(data){
        console.log("error")
    }
  });
});

$.eachを用いることによって作成したそれぞれのURLに対して、$.each内の処理をしてねと指示しています。

$.ajax内ではまずURLをhtml形式で開けるかどうかを調査します。

開けるとわかったらそのページにキーワードが含まれているか検索し、あればliタグを形成、そこにページのURLとh1タグ内を設置します。

これで自作のサイト内検索ボックスの完成です。

まとめ

ご紹介したサイト内検索ボックスは最低限の機能で作成しています。
そのため2つ以上のキーワードで検索できたり、大文字や小文字などキーワードが完全に一致していないと検索できません。

またどんどんパワーアップさせて行く予定なので、また記事に書かけたらなぁーと思います。