.save

セーブがしたいんです…

JS学習　文字が入力されるたびに検索できるようにする（インクリメンタルサーチ）

インクリメンタルサーチ学習に向けて

文字が入力されるたびに検索できるようにする

・main.js

// 入力されたものと比較される値の配列
var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry'];

$(function() {
// 変数listにid listの場所を代入する
  var list = $("#list");
  var preWord;
// 9,検索結果を表示するlistに追加する処理
  function appendList(word) {
    // 変数itemに<li class="list">を新規に作成し、そこに引数wordを追加する
    var item = $('<li class="list">').append(word);
    // 変数listに変数itemの中身を挿入
    list.append(item);
  }

// 5,前方一致に対応するためには、^を検索する言葉の前につける必要がある。今回は、splitで作成した配列要素の前に^をつければ前方一致ができる。配列の要素を加工した新しい配列を作成するには、map()を使用する。map()の引数に要素の頭に^をつける処理をする、関数editElementを渡す。map()によって作成された新しい配列をnewInputsという変数に入れる。
    function editElement(element) {
    var result = "^" + element;
    return result;
  }
  
// 1,#keywordにワードが入力された時の処理
  $("#keyword").on("keyup", function() {
    // 2,変数inputに、#keywordに入力された値を取得し、代入する
    var input = $("#keyword").val();
    // 3,変数inputに入った複数の文字列をsplit()で分割する。split()で空文字で区切った配列から空文字を削除している。引数のeには、配列の要素が代入されている。eに文字が代入されている場合はtrueになるので、配列に格納される。反対に空文字の場合はfalseになるので、配列には格納されない。このようにすることで、スペースが入力された時に配列の要素がすべて表示されなくなった。
    var inputs = input.split(" ").filter(function(e) { return e; });
    // 4,変数inputsに入った配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作る。map()は、配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作る。
    var newInputs = inputs.map(editElement);
    // 6,変数wordに変数newinputsの中身の要素を｜でつないだ配列を代入する
    var word = newInputs.join("|");
    // 7,変数wordの中身を正規表現化したものを代入する。
    var reg = RegExp(word);
    // 8,2回目以降の検索時に前の検索結果をremove()を使って.list(検索結果を表す変数itemで作っているliのこと)を削除する
    $(".list").remove();
    // 9,変数wordと変数prewordがイコールでない場合、さらに入力されたワードが0でない場合に、配列から１つずつ取り出して変数regと比較する。マッチしたのをappendlistに加える。
    if (word != preWord && input.length !== 0) {
      $.each(fruits, function(i, fruit) {
        if (fruit.match(reg)) {
          appendList(fruit);
        }
      });

      if ($(".list").length === 0) {
        appendList("一致する果物はありませんでした");
      }
    }
    // 変数prewordに変数wordの中身を代入する。これによって次の検索の準備をする。入力されたもの=>word これと同じ値のpreword.wordが違う値になったらまた検索をスタートさせる。
    // preWord = word;
  });
});

・index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="form-group">
      <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください">
      <button type="button" id="submit" class="btn">検索</button>
    </div>
    <ul id="list"></ul>
  </body>
</html>