jQuery Mobile - 可过滤的预呈现

更新于 2024/12/20 15:02:00

描述

可过滤小部件在启动期间执行一次过滤器，以确保子列表返回搜索输入中输入的值。为防止这种情况，请指定 data-enhanced = "true" 属性。

每当此属性设置为 true 时，都假定您已将 uiscreen 类正确应用到那些最初必须隐藏的子级。可过滤小部件使用搜索输入来确定搜索输入是否已预呈现。

以下示例预呈现搜索输入和可过滤项。

示例

以下示例演示了在 jQuery Mobile 中使用可过滤预呈现。

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Pre-rendering</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <div class = "ui-input-search ui-body-inherit ui-corner-all 
            ui-shadow-inset ui-input-has-clear">
            <input data-type = "search" data-enhanced = "true" data-inset = "false" 
               id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
         </div>
         
         <div data-role = "controlgroup" data-enhanced = "true" data-filter = "true" 
            data-filter-reveal = "true" data-input = "#pre-rendered-example-input" 
            class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class = "ui-controlgroup-controls">
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Audi</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child 
                  ui-shadow ui-last-child">Ford</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Hyundai</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Tata</a>
            </div>
         </div>
      </form>
      
   </body>
</html>