たくさんの要素の中から特定の要素を見つけるときに、使えるUIです。
通信もなく、単純に文字が一致するものを探し出すことができます。
- apple
- android
- pear
- robot
入力された文字と属性の値を前方一致で判定しています。
JSは以下です。
$(function() { $("#myterm").keyup(function (e) { if(e.target.value){ $("#demo_list li").fadeOut(); $("#demo_list li[data^='"+e.target.value+"']").fadeIn(); }else{ $("#demo_list li").fadeIn(); } }); });
この記述は
<li data="apple">apple</li>のようなdataの値を取得しています。
要素のvalから値を取得してもよいが、分けることで別々の情報で判定することもできます。
例えば、アップルという文字をappleでヒットさせるとかがか可能です。