Web Storage と jQuery UI でサジェスト機能を実装する

JavaScript

2015.08.14

どうもfujiharaです。ナツイですね～？
神奈川の宇多田世代ならこの言葉知っていると思うんですが、いかがでしょうか？

今回はWeb Storageと jQuery UIでサジェスト機能を実装していきます。

機能概要

機能の概要を説明します。ユーザが過去に入力した文字をフォームに入力した際に同じものをサジェストとして提供するようにします。

実装方法

まずサジェスト機能はjquery UIのサジェスト機能を使用します。
Autocomplete　こちらはサジェストするワードを配列で渡すだけでサジェスト機能を提供してくれる優れものです。
そして渡すワード配列を保存しておくのがWeb Storage になります。
処理内容は以下が考えられると思います。

①ページ読込時に保存されてる検索ワード配列を読み込む。

②読み込んだ検索ワード配列をAutocompleteに渡す。

③ユーザが文字を入力し、検索をしたときに履歴を残す。

①検索ワード配列読込

今回はWeb Storage のローカルストレージを使用します。こちらはブラウザを閉じても保存しておいてくれる優れものです。
Web Storage に保存されているキーで指定したオブジェクト(検索ワード)を返す関数を作成します。


//Web Storage(ローカルストレージ)が使用できるか確認する関数
$.fn.checkLocalStorage = function () {
  if (typeof window.localStorage === "undefined") {
    return false;
  }
  return true;
};
//Web Storage から 値を読み込む関数
$.fn.readStorage = function(key) {
  var keyValue = window.localStorage.getItem(key);
  //Web Storageからキーを指定して取り出した結果が空の場合
  if (keyValue === null) {
    keyValue = JSON.stringify({});
  }
  //取得した値をparseする(保存時には
  keyValue = JSON.parse(keyValue);
  return keyValue;
};

②AutoCompleteに検索ワード配列を設定

こちらはHTMLとJavaScriptになります。Autocompleteに配列を設定する関数は引数でオブジェクトを取得し配列変換後にAutocompleteに渡すようにします。


html
<form method="POST">
<input type="text" id="history_check" name="search"/>
<input type="submit" value="検索">
</form>

javascript
$.fn.setSuggest = function(historyObj) {
  //検索用ワード配列
  var historyArray = [];   //取得したオブジェクトを補完する配列
  var filterHistoryArray = []; //取得したオブジェクトを整形した配列
  for (var k in historyObj) {
    //スペースのみの検索ワードを弾く
    if (typeof historyObj[k] !== "undefined" && 
　　　　historyObj[k].replace(/\s+/g, ""); !== "") {
      historyArray.push(historyObj[k]);
    }
  }
  //同じ値をはじく
　if (historyArray.length !== 0) {
    filterHistoryArray = historyArray.filter(function(x, i, self) {
      return self.indexOf(x) === i;
    });
  }
  //フォームにセットする
  var $target = $('#history_check').autocomplete({
    autoFocus:true,
    source: filterHistoryArray
  }); 
};

検索履歴を残す

検索ボタンが押されたときにフォームに入力された値をローカルストレージに保存させます。


//検索オブジェクトをローカルストレージに書き込む
$.fn.writeHistory = function (historyObj, history, historyKey) {
  var tmpHistories = $(historyObj)[0];
  var keyNumber = 0;
  for (var hk in tmpHistories) {
    if (typeof tmpHistories[hk] === "undefined") {
      return true;
    }
    keyNumber = parseInt(hk);
  }
  historyObj[keyNumber+1] = history;
  //ローカルストレージに検索オブジェクトを書き込む
  window.localStorage.setItem(historyKey, JSON.stringify(historyObj));
  return true;
};

$.fn.setSubmitAction = function(historyObj) {
  // submit アクション時に入力値を検索オブジェクトに追加する
  $('form').on('submit', function(e) {
    $.fn.writeHistory(historyObj, $('#history_check').val(), 'history');
  })
};

合体

最後にそれぞれの関数を合体させます。


<!DOCTYPE html>
<html lang="ja">
<head>
<title>History Web Strage</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form method="POST">
<input type="text" id="history_check" name="search"/>
<input type="submit" value="検索">
</form>
<script>
//Web Storage が使用可能か判定する関数
$.fn.checkLocalStorage = function () {
  if (typeof window.localStorage === "undefined") {
    return false;
  }
  return true;
};

//Web Storage から 値を読み込む関数(キー指定)
$.fn.readStorage = function(key) {
  var keyValue = window.localStorage.getItem(key);
  //Web Storageからキーを指定して取り出した結果が空の場合
  if (keyValue === null) {
    keyValue = JSON.stringify({});
  }
  //取得した値をparseする(保存時には
  keyValue = JSON.parse(keyValue);
  return keyValue;
};

//フォームにサジェストを実装する関数
$.fn.setSuggest = function(historyObj) {
  //検索用ワード配列
  var historyArray = [];   //取得したオブジェクトを補完する配列
  var filterHistoryArray = []; //取得したオブジェクトを整形した配列
  //オブジェクトを配列に変換 (スペースだけのものを弾く)
  for (var k in historyObj) {
    if (typeof historyObj[k] !== "undefined" &&
　　　　historyObj[k].replace(/\s+/g, "") !== "") {
      historyArray.push(historyObj[k]);
    }
  }
  //同じ入力値を弾く
　if (historyArray.length !== 0) {
    filterHistoryArray = historyArray.filter(function(x, i, self) {
      return self.indexOf(x) === i;
    });
  }
  var $target = $('#history_check').autocomplete({
    autoFocus:true,
    source: filterHistoryArray
  });
};

$.fn.writeHistory = function (historyObj, history, historyKey) {
  var tmpHistories = $(historyObj)[0];
  var keyNumber = 0;
  for (var hk in tmpHistories) {
    if (typeof tmpHistories[hk] === "undefined") {
      return true;
    }
    keyNumber = parseInt(hk);
  }
  historyObj[keyNumber+1] = history;
  window.localStorage.setItem(historyKey, JSON.stringify(historyObj));
  console.log(historyObj);
  return true;
};

$.fn.setSubmitAction = function(historyObj) {
  $('form').on('submit', function(e) {
    $.fn.writeHistory(historyObj, $('#history_check').val(), 'history');
  });
};

$(function() {
  if (!$.fn.checkLocalStorage()) {
    return false;
  }
  var historyObj = $.fn.readStorage('history');
  $.fn.setSuggest(historyObj);
  $.fn.setSubmitAction(historyObj);
});

</script>
</body>
</html>