
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 show and hide placeholder text
- How to add a property to object with condition in javascript
- ReferenceError: $ is not defined
- How to display for slash as a string in javascript HTML
- Custom slider js
- How to validate empty space in textbox in Javascript
- How can I add a key/value pair to a JavaScript object
- Apexcharts example code
- Apex chart bar chart
- How to push string in an array in Javascript
- Uncaught TypeError: Illegal invocation
- Remove hostname from URL in javascript
- Short-circuits conditionals
- Uncaught TypeError: $(...).summernote is not a function
- How to crop multiple images with cropper js
- Apex bar chart - fill bar color with gradient on hover
- Javascript set timeout function with example code
- How to get data from localstorage in javascript
- How to get file extension using javascript/jquery
- How to check caps lock is on in javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- JavaScript test() Method
- Prism js horizontally overflowing its container
- Cropper js with multiple images
- Javascript to print Fibonacci series upto 15 Observations