<body>
  <div class="wrapper">
    <div class="search-area">
      <form>
        <input type="text" id="search-text" placeholder="検索ワードを入力">
      </form>
      <div class="search-result">
        <div class="search-result__hit-num"></div>
        <div id="search-result__list"></div>
      </div>
    </div>

    <ul class="target-area">
      <li>りんご120円</li>
      <li>ばなな100円</li>
      <li>みかん150円</li>
      <li>いちご220円</li>
      <li>すいか500円</li>
    </ul>
  </div><!-- /.wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</body>
.search-area input[type="text"] {
  padding: 5px 5px 3px;
  font-size: 16px;
  border: 1px solid #D6D6D6;
}

.search-area input[type="text"]:focus {
  background: #F9F9F9;
}

.search-result {
  margin-top: 20px;
}
.hit-num__text span {
  font-weight: bold;
}
#search-result__list {
  margin-top: 15px;
}
#search-result__list span {
  display: inline-block;
  margin-right: 15px;
  padding: 5px;
  background: #F2F2F2;
}
.target-area {
  margin-top: 50px;
}
.target-area .hidden {
  display: none
}
$(function () {
  searchWord = function(){
    var searchText = $(this).val(), // 検索ボックスに入力された値
        targetText;

    $('.target-area li').each(function() {
      targetText = $(this).text();

      // 検索対象となるリストに入力された文字列が存在するかどうかを判断
      if (targetText.indexOf(searchText) != -1) {
        $(this).removeClass('hidden');
      } else {
        $(this).addClass('hidden');
      }
    });
  };

  // searchWordの実行
  $('#search-text').on('input', searchWord);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.