File manager - Edit - /home/asiatechinc/public_html/asiatechinc-websites/goabeachfun.com/test.php
Back
<h1>Jquery Javascript Keyup Keydown List Search</h1> <p> Here is a simple and light weight keyup or keydown search feature to filter through a list or any markup of elements. Facebook uses this to search your friends list. Could be used to filter table type elements as well. My example below searches through a demo friends list. </p> <input type="text" id="search_field" placeholder="Auto Search" size="100"> <ul id="demonames"> <li> <img src="https://brandontran.com/images/brandon-tran.jpg" alt="Brandon Tran"> <span class="demoname">Brandon Tran</span> </li> <li> <img src="https://graph.facebook.com/100000189423603/picture"> <span class="demoname">Brando Tran</span> </li> <li> <img src="https://graph.facebook.com/100004081602168/picture"> <span class="demoname">Brett Favre</span> </li> <li> <img src="https://graph.facebook.com/4/picture"> <span class="demoname">Mark Zuckerberg</span> </li> </ul> <style> #demonames { list-style: none; margin: 0; padding: 0; li { margin: 12px; padding: 0; } img { display: inline-block; vertical-align: middle; width: 100px; height: 100px; } span { display: inline-block; vertical-align: middle; } } </style> <script> // SEARCH FUNCTION var btsearch = { init: function(search_field, searchable_elements, searchable_text_class) { $(search_field).keyup(function(e){ e.preventDefault(); var query = $(this).val().toLowerCase(); if(query){ // loop through all elements to find match $.each($(searchable_elements), function(){ var title = $(this).find(searchable_text_class).text().toLowerCase(); if(title.indexOf(query) == -1){ $(this).hide(); } else { $(this).show(); } }); } else { // empty query so show everything $(searchable_elements).show(); } }); } } // INIT $(function(){ // USAGE: btsearch.init(('search field element', 'searchable children elements', 'searchable text class'); btsearch.init('#search_field', '#demonames li', '.demoname'); }); </script>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.07 |
proxy
|
phpinfo
|
Settings