jQuery Mobile Filterable enhanced Option
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 enhanced option. The enhanced option indicates whether the original markup necessary for the filterable widget is present or not. Making it true, some options do not work for the first time.
Syntax: The enhanced option takes a boolean value.
Initialize the filterable widget:
$(".items").filterable({ enhanced:true, });
-
Get the enhanced option:
var enhanced = $(".items").filterable("option", "enhanced");
-
Set the enhanced option:
$(".items").filterable("option", "enhanced", true);
CDN Links: Use the following CDNs for your jQuery Mobile project.
<link href=âhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.cssâ rel=âstylesheetâ/>
<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, the enhanced option is set to âtrueâ with the filterReveal set to âtrueâ but it doesnât work because it removes the required markup for the Filterable. But after a single search, the enhanced option is no more in action as the widget is loaded.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel = "stylesheet" /> < 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;" > w3wiki </ h1 > < h3 style = "text-align:center;" > jQuery Mobile Filterable enhanced Option </ h3 > < ul class = "items" > < li > < a href = target = "_blank" > Data Structures </ a > </ li > < li > < a href = target = "_blank" > Interview preparation </ a > </ li > < li > < a href = target = "_blank" > Java Programming </ a > </ li > </ ul > < script > $(".items").filterable({ enhanced:true, filterReveal:true, }); </ script > </ body > </ html > |
Output:
Reference: https://api.jquerymobile.com/filterable/#option-enhanced
Contact Us