絞り込み検索の動作を改善したい

Question

いつもお世話になっております。

今回以下参考サイトを参考に絞り込み検索を実装しましたが、
https://codepen.io/clue-design/pen/gXqzxL

「white」などのカラーテキストが最初から表示されておりますが
この表示をデフォルトでは非表示にして、検索フォームにテキストを入れると表示される動作にしたいと思っています。

●試した事
「white」などを囲っている「li」にcssでdisplay:none;を指定して動作を確認すると
デフォルトが非表示になり、検索フォームを入力すると該当のカラーテキストが表示されたのですが、

検索フォームに入力したテキストをクリアすると、
また「white」などのカラーテキストが表示されてしまいました。
テキストをクリアすると、また非表示に戻したいです。

知識が浅く申し訳ございません。
お力添えいただければ嬉しいです。

Comments

[m.ts10806]

ご自身が組まれたコードをご提示ください。

Answer 1

$(function(){
  $('.search__text').on('input',function(){
    search__text = $(".search__text").val();
    $('.target li').hide().filter(function(){
      return search__text!=="" && $(this).text().match(search__text));
    }).show();
  }).trigger('input');
});

Comments

[yambejp]

正規表現のワイルドカードどうしたいかによりますね
いまのままだと「.」で全候補が表示されます

[退会済みユーザー]

yambejp様
ご回答ありがとうございましたm(__)m
勉強いたします。

Answer 2

検索フォームに入力したテキストをクリアすると、

また「white」などのカラーテキストが表示されてしまいました。
テキストをクリアすると、また非表示に戻したいです。

search__textが未入力ならhideさせるようにすれば良いかと思います。

$(function(){
  // テキストボックスでキーアップされた時に実行
  $('.search__text').keyup(function(){
    // テキストボックスの内容を保存
    search__text = $(".search__text").val();
    // ul内のliをすべて取得してループ
    $('.target li').each(function(){
      val = $(this).text();
      if (search__text && val.match(search__text)) { // search__textが未入力ならhideさせる
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});

Comments

[退会済みユーザー]

plasticgrammer様

ご回答ありがとうございます。
教えていただいた思っている動作になりましたm(__)m