
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 add key/value pair to existing form data
- How can I add a key/value pair to a JavaScript object
- Remove property from object in javascript
- JavaScript test() Method
- Cropper js with multiple images
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- Check if value exists in array javascript
- Get multiplication in javascript using array input
- Animating numbers counting Javascript
- How to validate input type file size in javascript
- How to make entire Div clickable in javascript
- How to add a property to object with condition in javascript
- How to Set data to localstorage in javascript
- Concat variable with string in javascript
- How to echo array in Javascript
- Input type file styling
- Generate 6 digit random number in javascript
- How to set href value of anchor tag in javascript
- Javascript to print Fibonacci series upto 15 Observations
- Custom slider js
- How to check file is an image in javascript using filename
- Copy one array to another in javascript
- Prism js horizontally overflowing its container
- Uncaught TypeError: Illegal invocation
- How to get the length of a number in JavaScript