テックエキスパートでjQueryを使って検索機能を実装したので、１行ずつコードを説明。その２

プログラミング

前回の続きから

まず完成形はこんな感じ。今回は複数検索をjQueryで実装

jQueryの前提知識。

split

splitは、文字列を任意の箇所で区切って文字列を分割して配列化することが可能

map

繰り返し処理を実行して新しい配列要素を返してくれるのが特徴

join

join()メソッドは、配列内の全ての要素を文字列として連結します。

正規表現　”|”

いずれかの条件 (OR条件) として使われます。

全体のコード

let 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() {
  let list = $("#list");

  function appendList(word) {
    let item = $('<li class="list">').append(word);
    list.append(item);
  }

  function editElement(element) {
    let result = "^" + element;
    return result;
  }

  $("#submit").on("click", function() {
    let input = $("#keyword").val();
    let inputs = input.split(" ");　←複数の言葉を入力するときは、言葉と言葉の間にスペースが入ります。スペースで区切って配列を作成すれば良い。入力された文字列から配列を作成する。
    let newInputs = inputs.map(editElement);　　←一旦editElementメソッドを呼び出す。map()を使って配列要素を前方一致で加工した新しい配列を作成する
    let reg = RegExp(newInputs.join("|"));　　←　　前方一致した文字列同士を連結してregに代入。

    $(".list").remove();

    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });

    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});

let 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() {

let list = $("#list");

function appendList(word) {

let item = $('<li class="list">').append(word);

list.append(item);

}

function editElement(element) {

let result = "^" + element;

return result;

}

$("#submit").on("click", function() {

let input = $("#keyword").val();

let inputs = input.split(" ");　←複数の言葉を入力するときは、言葉と言葉の間にスペースが入ります。スペースで区切って配列を作成すれば良い。入力された文字列から配列を作成する。

let newInputs = inputs.map(editElement);　　←一旦editElementメソッドを呼び出す。map()を使って配列要素を前方一致で加工した新しい配列を作成する

let reg = RegExp(newInputs.join("|"));　　←　　前方一致した文字列同士を連結してregに代入。

$(".list").remove();

$.each(fruits, function(i, fruit) {

if (fruit.match(reg)) {

appendList(fruit);

}

});

if ($(".list").length === 0) {

appendList("一致する果物はありませんでした");

}

});