jQuery Mobile Filterable input Option

Last Updated : 26 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where the search text is written.

In this tutorial, we are going to learn the jQuery Mobile Filterable input Option. The input option asks for the item or element that will be used as input for search text for filtering items. There is a default input text field but we can use a custom text field also by using the input option.

Syntax: The input option takes a string/element/jQuery which will be used as an input field.

$(".items").filterable({
    input: "#input-for-filtering",
});

To get the input option after initialization, use the following syntax.
```
var inputOpt = $(".items").filterable("option", "input");
```

To set the input option after initialization, use the following syntax.

$(".items").filterable("option", "input", 
                       "#input-for-filtering");

CDN Links: Use the following CDNs for the jQuery Mobile project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we have used a different input element for the input option which has an id. In the option, we have provided the id of the input element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green; text-align: center;"> 
        GeeksforGeeks 
    </h1> 
    <h3 style="text-align: center;"> 
        jQuery Mobile Filterable input Option</h3> 
    <label for="search">GFG Search</label> 
    <input type="text" 
           name="search" id="gfgsearch"> 
    <ul class="items"> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/data-structures" 
                target="_blank"> 
                Data Structures 
            </a> 
        </li> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/courses/complete-interview-preparation" 
                target="_blank"> 
                Interview preparation 
            </a> 
        </li> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/java" 
                target="_blank"> 
                Java Programming 
            </a> 
        </li> 
    </ul> 
    <script> 
        $(".items").filterable({ 
            input: "#gfgsearch", 
        }); 
    </script> 
</body> 
  
</html>