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

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

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

#JS

```javascript
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 `クラス付与してください。

![名称未設定.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195419/7eadedd2-184c-7430-b647-038832c15ddd.gif)

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

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

#解説

## 基本の機能

```js
// searchWordの実行
$('#search-text').on('input', searchWord);
```
inputに動きがあるごとに、searchWordを実行します。

```js
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`に入力された値を格納します。

```js
$('.logs .column').each(function() {
    //.log .columnがあるごとに実行する
    targetText = $(this).text().toLowerCase();
}
```
ぐるぐるして、全ての`.log .column`のtextをチェックしてます。
`toLowerCase()`で、英字を全て小文字にすることで、大小関係なく検索できるようにしています。

```js
        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クラスを付与しています。

## ひらがな・カタカナどっちでも一致させる
入力された文字を変換し、どっちも格納して検索することで、どっちでも一致するようにしています。

### カタカナからひらがなに
```js
kanaToHira = function(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
};
```

### ひらがなからカタカナに
```js
hiraToKana = function(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
        var chr = match.charCodeAt(0) + 0x60;
        return String.fromCharCode(chr);
    });
};
```

これでおわりです。

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

#参考サイト
[JavaScriptでカタカナをひらがなに変換する(その逆も)](https://qiita.com/mimoe/items/855c112625d39b066c9a)2015.09.09
[検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する](https://www.tam-tam.co.jp/tipsnote/javascript/post11315.html) 2016.11.22