ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

検索サジェスト導入

こんにちは。エンジニアインターンの土屋です。今日は検索サジェストの実装について書きます!

jQuery UI で プラグインAutocomplete を実装


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  var hogehogeTags = [
    "網戸",
    "網戸 張替え",
    "麻",
    "アクリル素材",
    "かきくけこ",
    "さしすせそ",
    "たちつてと",
    "なにぬねの",
    "はひふへほ",
    "まみむめも",
    "やゆよ",
    "らりるれろ",
    "わをん",
    "あかさたなはまやらわ",
    "いきしちにひみり",
    "うくすつぬふむゆる",
    "えけせてねへめれ",
    "おこそとのほもよろを",
    "ん",
    "abcdefg",
    "hijklmnop",
    "qrstuv",
    "wxyz",
    "abc",
    "def",
    "ghi",
    "jkl",
    "mno",
    "pqr",
    "stu",
    "vwx",
    "yz",
    "漢字1",
    "漢字2",
    "漢字3"
  ];
   $( "#hogehoge" ).autocomplete({
    source: hogehogeTags
  });
});

</script>
</head>
<body>

<form id="searchform" method="get" role="search">
    <input id="searchfield" />
    <input type="submit" name="go" value="go!" />
</form>

<input type="text" id="hogehoge" />

</body>
</html>



漢字の検索結果が表示できない場合

例えば「あ」と入力した時に「網戸」と出るようにしたい。
上記のままでは「あ」というひらがなと一致した言葉しか出てきません。

$(function() {
 var dataList = [
   ["あみど","網戸"]
 ];
  $( "#hogehoge" ).autocomplete({
        source : function(request, response) {
            var re   = new RegExp('^(' + request.term + ')'),
                list = [];

            $.each(dataList, function(i, values) {
                if(values[0].match(re) || values[1].match(re)) {
                    list.push(values[1]);
                }
            });
            response(list);
        }
 });
});

RegExp正規表現オブジェクトを生成し、valuesに入ってきた単語の読み仮名一文字目が正規化された値が入っている変数re と合致したら、サジェストされる。