.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");
// 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,id submitがクリックされた時の処理
  $("#submit").on("click", function() {
    // 2,変数inputに、#keywordに入力された値を取得し、代入する
    var input = $("#keyword").val();
    // 3,変数inputに入った複数の文字列をsplit()で分割する。split()は、文字列を複数の部分文字列に区切り、文字列の配列に分割する。引数には文字列を区切るための文字を指定する。
    var inputs = input.split(" ");
    // 4,変数inputsに入った配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作る。map()は、配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作る。
    var newInputs = inputs.map(editElement);
    // 6,変数regに変数newinputsの中身の要素を｜でつないで、さらに正規表現化したものを代入する。join()は、配列のすべての要素をつないだ文字列を作成する。引数に文字列を渡すと、その文字列で文字と文字をつなげる。join()の引数に|を渡すことでnewInputsの要素を|でつなぐ。その結果をRegExpの引数に渡すことで正規表現を作成する。
    var reg = RegExp(newInputs.join("|"));
    // 7,2回目以降の検索時に前の検索結果をremove()を使って.list(検索結果を表す変数itemで作っているliのこと)を削除する
    $(".list").remove();
    // 8,配列から１つずつ取り出して変数regと比較する。マッチしたのをappendlistに加える。
    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });
    // マッチしなかった場合の処理
    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});

・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>