作業録：jQueryでインクリメンタルサーチ

liの子要素のspanを見出しとしてインクリメンタルサーチをする。
ついでにspanの弟要素のdivを別枠で表示させる。

jquery

1. $(function() {
2.   $("#q").keyup(function() {
3.       if($("#q").val() ==""){
4.         $("span").parent().show();
5.       }else{
6.         $("span:not(:contains("+$("#q").val()+"))").parent().hide();
7.         $("span:contains("+$("#q").val()+")").parent().show();
8.       }
9.         $("article").empty();
10.         $("span:contains("+$("#q").val()+") ~ div").clone(true).css("display","block").appendTo($("article"));
11.     return false;
12.   });
13. });

HTML

1. <form>
2.   <input type="search" name="q" id="q">
3. </form>
4. <ol>
5.   <li>
6.     <span>82528</span>
7.     <div style="display: none;">82528</div>
8.   </li>
9.   <li>
10.     <span>67122</span>
11.     <div style="display: none;">67122</div>
12.   </li>
13. </ol>
14.  
15. <article></article>

デモページ