ブックマーク / www.tam-tam.co.jp (1)

  • 検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する | Tips Note by TAM

    下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。 検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。 部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。 設定したスクリプトはこちらです。 searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, hitNum; // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('#search-result__list').empty(); $('.search-result__

    検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する | Tips Note by TAM
    i_syh
    i_syh 2018/02/08
  • 1