テックエキスパートでjQueryを使って検索機能を実装したので、1行ずつコードを説明。

まず完成形はこんな感じ。Image from Gyazo

jQueryの前提知識。

無名関数

処理の順番
 

val()

val()はHTMLタグ内に記述されているvalue属性を取得したり変更することができるメソッド
入力ボックスやチェックボックスのように、value属性が記述されていれば「val()」メソッドで取得・変更することが可能。

 

正規表現の ^ 

文字 説明 正規表現の例 マッチする例
^ 直後の文字が行の 先頭 にある場合にマッチします。 ^google google...

 

function文

Rubyのdef~endと同じ。

 

append()

「append()は、指定した子要素の最後にテキスト文字やHTML要素を追加することができるメソッド

 

全体のコード