tests/additional-unit-tests/searchbar/index.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
   5                 <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   6                 <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
   7                         data-framework-theme="tizen-white"
   8                         data-framework-viewport-scale=false>
   9                 </script>
  10
  11                 <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.2.0/external/qunit.css" />
  12                 <script src="../../../libs/js/jquery-mobile-1.2.0/external/qunit.js"></script>
  13                 <script src="searchbar-tests.js"></script>
  14                 <title>Searchbar</title>
  15         </head>
  16
  17         <body>
  18                 <h1 id="qunit-header">Searchbar</h1>
  19                 <h2 id="qunit-banner"></h2>
  20                 <div id="qunit-testrunner-toolbar"></div>
  21                 <h2 id="qunit-userAgent"></h2>
  22                 <ol id="qunit-tests"></ol>
  23
  24                 <div id="qunit-fixture">
  25                         <div data-role="page" id="dummy-page">
  26                                 <div data-role="header" data-position="fixed">
  27                                         <h1>Dummy</h1>
  28                                 </div>
  29                                 <div data-role="contents">
  30                                 </div>
  31                         </div>
  32
  33                         <div data-role="page" id="searchbar-unit-test" data-add-back-btn="true">
  34                                 <div data-role="header" data-position="fixed">
  35                                         <h1>Searchbar</h1>
  36                                         <input type="search" data-cancel-btn=true name="search" data-icon="call" id="searchInput" value=""/>
  37                                 </div>
  38                                 <div data-role="content" id="searchbar-content">
  39                                         <p>Hairston</p>
  40                                         <p>Hansbrough</p>
  41                                         <p>Allred</p>
  42                                         <p>Hanrahan</p>
  43                                         <p>Egan</p>
  44                                         <p>Dare</p>
  45                                         <p>Edmonson</p>
  46                                         <p>Calip</p>
  47                                         <p>Baker</p>
  48                                         <p>Fazekas</p>
  49                                         <p>Garrity</p>
  50                                         <p>Hansen</p>
  51                                         <p>Feigenbaum</p>
  52                                         <p>Fillmore</p>
  53                                         <p>Darden</p>
  54                                         <p>Davis</p>
  55                                         <p>Fitzgerald</p>
  56                                         <p>Carr</p>
  57                                         <p>Danilovic</p>
  58                                         <p>Dark</p>
  59                                         <p>Alexander</p>
  60                                         <p>Allen</p>
  61                                         <p>Edwards</p>
  62                                         <p>Garrett</p>
  63                                         <p>Gardner</p>
  64                                         <p>Carroll</p>
  65                                         <p>Garner</p>
  66                                         <p>Finn</p>
  67                                         <p>Edelin</p>
  68                                         <p>Gay</p>
  69                                 </div>
  70                         </div>
  71                 </div>
  72                 <script>
  73                         $( "#searchInput" ).live( "input change", function(){
  74                                 var regEx = "";
  75
  76                                 regEx = ".*" + $( "#searchInput" ).val();
  77
  78                                 $( "#searchbar-content p" ).each( function(){
  79                                         if ( $( this ).text().search( new RegExp( regEx ) ) != -1) {
  80                                                 $( this ).show();
  81                                         }
  82                                         else {
  83                                                 $( this ).hide();
  84                                         }
  85                                 });
  86                         } );
  87                 </script>
  88         </body>
  89 </html>