title: jquerymobile listview filter programmatically
body: <p>I'm trying to accomplish this task. </p>
  
  <p>I have two columns grid </p>
  
  <pre><code>&lt;div class="ui-grid-a"&gt;
      &lt;div class="ui-block-a" style="width:35%"&gt;
          &lt;div data-role="controlgroup" data-type="horizontal"&gt;
              &lt;a href="#" data-role="button"&gt;A&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;B&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;C&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;D&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;E&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;F&lt;/a&gt;
          &lt;/div&gt;        
          &lt;div data-role="controlgroup" data-type="horizontal"&gt;
              &lt;a href="#" data-role="button"&gt;G&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;H&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;I&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;J&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;K&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;L&lt;/a&gt;
          &lt;/div&gt; 
          &lt;div data-role="controlgroup" data-type="horizontal"&gt;
              &lt;a href="#" data-role="button"&gt;M&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;N&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;Ñ&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;O&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;P&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;Q&lt;/a&gt;
          &lt;/div&gt; 
          &lt;div data-role="controlgroup" data-type="horizontal"&gt;
              &lt;a href="#" data-role="button"&gt;R&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;S&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;T&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;U&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;V&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;W&lt;/a&gt;
          &lt;/div&gt;         
          &lt;div data-role="controlgroup" data-type="horizontal"&gt;
              &lt;a href="#" data-role="button"&gt;X&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;Y&lt;/a&gt;
              &lt;a href="#" data-role="button"&gt;Z&lt;/a&gt;
              &lt;a href="#" data-role="button" onclick="buscar();"&gt;BUSCAR&lt;/a&gt;
          &lt;/div&gt;         
      &lt;/div&gt;       
      &lt;div class="ui-block-b" style="width:65%; top:0; position:relative;"&gt;
          &lt;ul id ="milista" data-role="listview" data-filter="true" style="left:1em; width:95%; "&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Acura&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Audi&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;BMW&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Chrysler&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Dodge&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Ford&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;GMC&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Honda&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Hyundai&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Infiniti&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Jeep&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Kia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Lexus&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Mini&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Nissan&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Porsche&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Subaru&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Toyota&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Volkswagon&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Volvo&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>like shows at <a href="http://jsfiddle.net/jupagose/sugfP/" rel="nofollow noreferrer">http://jsfiddle.net/jupagose/sugfP/</a>,  I want to programmatically filter the listview while the user type's on lefthand panel.  I don't want to force the user to load  OS keyboard.</p>
  
  <p>It is possible with jquery? </p>