BLOG
[JavaScript]簡単データバインディングサンプル
2016/5/7
よくAngularJSのサンプルであるようなテキストボックスに文字列をいれて、対象テキストを検索するサンプルをjQueryを使用していますが作成しました。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<div id="content"> <form> <input id="textArea" type="text" size="40" value=""> </form> <ul id="list"> <li><a href="#">あああ</a></li> <li><a href="#">あああ</a></li> <li><a href="#">あいい</a></li> <li><a href="#">いいい</a></li> <li><a href="#">かかか</a></li> <li><a href="#">かかあ</a></li> <li><a href="#">ききき</a></li> <li><a href="#">さささ</a></li> <li><a href="#">ししし</a></li> <li><a href="#">たたた</a></li> <li><a href="#">ちちち</a></li> <li><a href="#">ななな</a></li> <li><a href="#">ないい</a></li> <li><a href="#">ややや</a></li> <li><a href="#">やああ</a></li> <li><a href="#">わわわ</a></li> </ul> </div> <!-- /#content --> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script> (function(){ var textSearch = { init: function(){ var self = this; self.textChange(); }, textChange: function(){ var self = this; var defaults = this.defaults; var tx = ""; $(document).on('input', '#textArea', function() { tx = $(this).val(); $('#list li').each(function(){ if($(this).is(':contains(' + tx + ')')){ $(this).show(); } else { $(this).hide(); } }); }); } } textSearch.init(); })(); </script> |
テキストボックスの値が変化したらというところで
|
1 |
$(document).on('input', '#textArea', function() { |
という書き方をしています。
※対応していないブラウザもあるので注意が必要です。
GitHubにもアップしています。
Tag:JavaScript jQuery