あんまり実用性がないキーワード絞り込み検索

入力するとすぐ絞り込んでくれる機能をつけたい！

とりあえず見た目の動きだけでいいからと作りました。
実用性はほぼありません！！個人用サイトくらいでしか使えないよ！
実質自分のための備忘録メモです。

やりたいこと

inputエリアに文字を打ち込むと下の記事カードがリアルタイムで絞り込まれる。

JS

kanaToHira = function(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
};

hiraToKana = function(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
        var chr = match.charCodeAt(0) + 0x60;
        return String.fromCharCode(chr);
    });
};

searchWord = function(){
    var searchText = $(this).val().toLowerCase(), // 検索ボックスに入力された値
        targetText;

    $('.logs .column').each(function() {
      targetText = $(this).text().toLowerCase();
      
      var hira = kanaToHira(searchText);
      var kana = hiraToKana(searchText);

        if (targetText.indexOf(hira) != -1 || targetText.indexOf(kana) != -1 || targetText.indexOf(searchText) != -1) {
            $(this).removeClass('text_hidden');
        } else {
            $(this).addClass('text_hidden');
        }
    });
};

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

とりあえず実装だけしたいんじゃ！って人は、inputに#search-textつけて、絞り込みたいやつに.logs``.column クラス付与してください。

こんな動きになります！（なんか縦長だけど気にせず…）

.logs``.column クラスは、カードごとにつけてください。つまり.logs``.column クラスがいっぱいある。

解説

基本の機能

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

inputに動きがあるごとに、searchWordを実行します。

searchWord = function(){
    var searchText = $(this).val().toLowerCase(), // 検索ボックスに入力された値
        targetText;

    $('.logs .column').each(function() {
      targetText = $(this).text().toLowerCase();
      
      var hira = kanaToHira(searchText);
      var kana = hiraToKana(searchText);

        if (targetText.indexOf(hira) != -1 || targetText.indexOf(kana) != -1 || targetText.indexOf(searchText) != -1) {
            $(this).removeClass('text_hidden');
        } else {
            $(this).addClass('text_hidden');
        }
    });
};

searchTextに入力された値を格納します。

$('.logs .column').each(function() {
    //.log .columnがあるごとに実行する
    targetText = $(this).text().toLowerCase();
}

ぐるぐるして、全ての.log .columnのtextをチェックしてます。
toLowerCase()で、英字を全て小文字にすることで、大小関係なく検索できるようにしています。

        if (targetText.indexOf(hira) != -1 || targetText.indexOf(kana) != -1 || targetText.indexOf(searchText) != -1) {
            $(this).removeClass('text_hidden');
        } else {
            $(this).addClass('text_hidden');
        }

indexOfでテキストが含まれるか検索しています。
含まれていなかったら-1がかえってくるため、-1以外のときはhiddenクラスを外すということを行なっています。
逆に一致したら、hiddenクラスを付与しています。

ひらがな・カタカナどっちでも一致させる

入力された文字を変換し、どっちも格納して検索することで、どっちでも一致するようにしています。

カタカナからひらがなに

kanaToHira = function(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
};

ひらがなからカタカナに

hiraToKana = function(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
        var chr = match.charCodeAt(0) + 0x60;
        return String.fromCharCode(chr);
    });
};

これでおわりです。

まとめ

要素ごとに実行するため、要素が多くなるほど実行回数が増えます。つまり重くなる。
つまり実用性がない。
でも、タグの絞り込みとかで使えるんじゃないかなぁって感じです。

参考サイト

JavaScriptでカタカナをひらがなに変換する(その逆も)2015.09.09
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する 2016.11.22