.save

セーブがしたいんです…

JS学習　入力された値を前方一致で検索する

JS

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

入力された値を前方一致で検索する

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

・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");
// listに追加する処理
  function appendList(word) {
    // 変数itemに<li class="list">を新規に作成し、そこに引数wordを追加する
    var item = $('<li class="list">').append(word);
    // 変数listに変数itemの中身を代入
    list.append(item);
  }
// id submitがクリックされた時の処理
  $("#submit").on("click", function() {
    // 変数inputにid keywordに入力された値を取得し、代入する
    var input = $("#keyword").val();
    // 入力された値をRegExp()を使って正規表現として使用できるようにしています。^を使うことで前方一致で検索できるようになります。この時regという変数に格納しています。
    var reg = new RegExp("^" + input);
    // 2回目以降の検索時に前の検索結果をremove()を使って.list(検索結果を表す変数itemで作っているliのこと)を削除する
    $(".list").remove();
    // 配列から１つずつ取り出して変数regと比較する。マッチものをlistに加える。
    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });
    // マッチしなかった場合の処理
    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});