How to use JavaScript to search for items in a list
Created at 23-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
- Check if value exists in array javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- How to get data from localstorage in javascript
- How to echo array in Javascript
- Remove property from object in javascript
- Input type file styling
- ReferenceError: $ is not defined
- Uncaught TypeError: Assignment to constant variable
- How to fixed bootstrap navbar at top on scroll
- Apexcharts example code
- Generate 6 digit random number in javascript
- How to check file is an image in javascript using filename
- How to set href value of anchor tag in javascript
- Concat variable with string in javascript
- How to get query string value in javascript
- How to display an image in Javascript onclick
- How to add a property to object with condition in javascript
- Copy one array to another in javascript
- How to make entire Div clickable in javascript
- Hide div on click outside of element in javascript/jQuery
- How to preview a word document in HTML using javascript
- Get multiplication in javascript using array input
- Javascript get only 10 characters from string
- How to add key/value pair to existing form data
- How to show and hide placeholder text