jQuery Mobile Filterable enhanced选项

jQuery Mobile是一个基于HTML5的用户界面系统，旨在制作可在所有智能手机、平板电脑和桌面设备上使用的响应式网站和应用程序。

Filterable是一个可以过滤任何元素的孩子的部件。在filterable的帮助下，一个表单、列表等可以被过滤。一个搜索栏出现在列表的顶部，搜索文本就写在那里。

在本教程中，我们将学习jQuery Mobile Filterable enhanced选项。enhanced 选项表示可过滤小部件所需的原始标记是否存在。使之成为真的，有些选项在第一次使用时就不工作。

语法。增强的选项需要一个布尔值。

初始化可过滤的小部件。

$(".items").filterable({
    enhanced:true,
});

获得enhanced选项。

var enhanced = $(".items").filterable("option", "enhanced");

设置enhanced选项。

$(".items").filterable("option", "enhanced", true);

CDN链接。为你的jQuery Mobile项目使用以下CDN。

<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>

例子。在下面的例子中，enhanced 选项被设置为 “true”，filterReveal 被设置为 “true”，但它并没有发挥作用，因为它删除了Filterable所需的标记。但是在一次搜索之后，增强选项就不再起作用了，因为小部件被加载了。

<!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;">
            GeeksforGeeks
        </h1>
        <h3 style="text-align:center;">
            jQuery Mobile Filterable enhanced Option
        </h3>
        <ul class="items">
            <li>
                <a href=
"https://www.geeksforgeeks.org/data-structures" 
                   target="_blank">
                    Data Structures
                </a>
            </li>
            <li>
                <a href=
"https://practice.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({
                enhanced:true,
                filterReveal:true,
            });            
        </script>
    </body>
</html>