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

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

検索サジェストやっとできました!

こんにちは!エンジニアインターンの土屋です!長い間、検索サジェストをやっていました。でもあまりにも時間がかかりすぎました。。なので、自分が今回ダメだったことも踏まえて今日はブログを書いていきたいと思います。

なぜ時間がかかりすぎてしまったのか….??

検索サジェストで自分が長く時間をかけすぎた理由として、
日本語でコードが読めていなかったことが1番の原因でした。
コードが読めていないのに書けるはずがありませんでした。
今回は実装しつつ、日本語で1行のコードがどんな処理をしているのかを
説明しながら書いていきます。

var dataList = []; 
//空の配列を定義
         $.getJSON("/json/suggest.json", null, function(data, status){ 
//jsonファイルの読み込み、<リクエストのURL、送信データ、通信が終わった時(無名関数)

             dataList = data['dic'];
         });
//dataListにdataの[dic]を代入
         $(function() {
             $( ".suggest" ).autocomplete({ 
//.suggestをクリックした時.autocompleteが行われる
                 source : function(request, response) {
                     var re   = new RegExp('^(' + request.term + ')'),
//入力された値が正規表現オブジェクトとして、(re)に入る
                         
                            list = [];
//listという空の配列を定義

                         $.each(dataList, function(i, values) {  
//dataList{["あみど","網戸"],[a,b]}  valuesにはインデックス番号「i」の a,bの値が入る

                             if(values[0].match(re) || values[1].match(re)) {
//もしvalues[0]と入力された値(re)が合っている、もしくはvalues[1]と入力された値(re)が合っている時

                                 list.push(values[1]);
//listで定義した配列のvalues[1]を使う
                             }
                         });
                         response(list);
//ループが終わったらそのlistを出力
                     },
                 autoFocus: true
                 });
             });

data[‘dic’]に入っているjsonのファイルのデータ

{"dic": [
    ["あみど", "網戸"],
    ["あみど はりかえ", "網戸 張替え"],
    ["あさ", "麻"]
  ]
}

コピペするだけはダメ。
一つ一つのコードを理解して進めて行く意識を持って、今後も学習に取り組みたいと思います。