
How to use JavaScript to search for items in a list
Created at 22-Jan-2021 ,
By samar
How to use JavaScript to search for items in a list
In this session, we’ll try our hand at solving the "How to use JavaScript to search for items in a list" puzzle by using the computer language.
-
<!-- HTML Code --> <div class="search-wrapper"> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here..." class="form-control search-box"/> <a class="csb-btn" href="javascript:void(0)" id="clearSearch"> <i class="fa fa-close"></i> </a> </div> <ul id="myUL"> <li><a href="javascript:void(0)">Adele</a></li> <li><a href="javascript:void(0)">Agnes</a></li> <li><a href="javascript:void(0)">Billy</a></li> <li><a href="javascript:void(0)">Bob</a></li> <li><a href="javascript:void(0)">Calvin</a></li> <li><a href="javascript:void(0)">Christina</a></li> <li><a href="javascript:void(0)">Cindy</a></li> </ul> <!-- Javascript Code --> <script> function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } if(input.value.length > 0) { $('#clearSearch').css("display","block"); } else{ $('#clearSearch').css("display","none"); } } //Clear input text on click $("#clearSearch").on('click', function(e){ $(this).hide(); $("#myInput").val(''); myFunction(); }) </script>
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Javascript
- How to get query string value in javascript
- How to echo array in Javascript
- Deault order of record in datatable
- How to display for slash as a string in javascript HTML
- How to check file is an image in javascript using filename
- Generate 6 digit random number in javascript
- How to add a property to object with condition in javascript
- How to check caps lock is on in javascript
- Remove hostname from URL in javascript
- How to preview a word document in HTML using javascript
- Uncaught TypeError: $(...).summernote is not a function
- Prism js horizontally overflowing its container
- Javascript set timeout function with example code
- Get hostname from URL in javascript
- Input type file styling
- Json stringify
- How to validate empty space in textbox in Javascript
- How to get the length of a number in JavaScript
- Animating numbers counting Javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- How to get file extension using javascript/jquery
- How to crop multiple images with cropper js
- Multidimensional array example javascript
- Hide div on click outside of element in javascript/jQuery
- How to open modal after redirect