Title: Hiding Inputs with search function
Last modified: December 13, 2019

---

# Hiding Inputs with search function

 *  [kurtis22](https://wordpress.org/support/users/kurtis22/)
 * (@kurtis22)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/hiding-inputs-with-search-function/)
 * Is there a way to hide all options when the user deletes what was searched. It
   is hidden until a search is made, then all the options come back. I know it has
   to do something with the filter input.
 *     ```
       <!-- input tag -->
           <input id="searchbar" onkeyup="search_brand()" type="text" name="search" placeholder="Search Brands.."> 
   
           <!-- ordered list -->
           <ol> 
                   <li class="brands"><a href="#otg">On The Go</a></li>
                   <li class="brands"><a href="wholesomeharvest">Wholesome Harvest</a></li>
                   <li class="brands"><a href="#wholesomeearth">Wholesome Earth</a></li>
                   <li class="brands"><a href="#simplydelish">Simply Delish</a></li>
                   <li class="brands"><a href="#naturespath">Natures Path</a></li>
                   <li class="brands"><a href="#saladtops">Salad Tops</a></li>
                   <li class="brands"><a href="#souptops">Soup Tops</a></li>
                   <li class="brands"><a href="#Molinoicoli">Molinoicoli</a></li>
                   <li class="brands"><a href="#hydraoil">Hydra-Oil</a></li>
                   <li class="brands"><a href="#voortman">Voortman</a></li>
           </ol> 
       <script>
       function search_brand() { 
           let input = document.getElementById('searchbar').value 
           input=input.toLowerCase(); 
           let x = document.getElementsByClassName('brands'); 
   
           for (i = 0; i < x.length; i++) {  
               if (!x[i].innerHTML.toLowerCase().includes(input)) { 
                   x[i].style.display="none"; 
               } 
               else { 
                   x[i].style.display="list-item";                  
               } 
           } 
       } 
       </script>
       ```
   
    -  This topic was modified 6 years, 6 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).

Viewing 1 replies (of 1 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/hiding-inputs-with-search-function/#post-12237294)
 * I don’t know what search you are referring to, but there is an element called`
   datalist` that works sort of like you describe. No javascript needed.
    [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)

Viewing 1 replies (of 1 total)

The topic ‘Hiding Inputs with search function’ is closed to new replies.

## Tags

 * [java-script](https://wordpress.org/support/topic-tag/java-script/)
 * [search bar](https://wordpress.org/support/topic-tag/search-bar/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [Joy](https://wordpress.org/support/users/joyously/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/hiding-inputs-with-search-function/#post-12237294)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics