用途
新着
履歴
分類

jQuery フォーム入力によるフィルター

jQuery フォーム入力によるフィルター
フォームに入力された文字によって、リストの要素を出したり、消したりするサンプルです。

たくさんの要素の中から特定の要素を見つけるときに、使える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でヒットさせるとかがか可能です。

HTMLはこちら


<input type="text" size="20" value="" id="myterm"  autocomplete="off">

<ul id="demo_list">
    <li data="apple">apple</li>
    <li data="android">android</li>
    <li data="pear">pear</li>
    <li data="robot">robot</li>
</ul>
公開 2019-08-10 23:16:25
このページの二次元コード
jQuery フォーム入力によるフィルター

人気のサンプル

search -  category -  about
© 2024 kipure
Top