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
- Custom slider js
- How to get the length of a number in JavaScript
- Apex bar chart - fill bar color with gradient on hover
- How to validate empty space in textbox in Javascript
- Apex chart bar chart
- How to add key/value pair to existing form data
- Apexcharts example code
- Short-circuits conditionals
- Copy one array to another in javascript
- How to show and hide placeholder text
- Remove property from object in javascript
- Concat variable with string in javascript
- How to fixed bootstrap navbar at top on scroll
- How to get query string value in javascript
- Uncaught TypeError: $(...).summernote is not a function
- Javascript get only 10 characters from string
- How to get file extension using javascript/jquery
- Javascript get data-id attribute value
- Get multiplication in javascript using array input
- How to preview a word document in HTML using javascript
- Json stringify
- How to Set data to localstorage in javascript
- How to display an image in Javascript onclick
- Hide div on click outside of element in javascript/jQuery
- Cropper js with multiple images