搜索框jQuery Mobile的

Question

我试图让我的jQuery Mobile的页面上的搜索功能，

HTML：

<input type="search" placeholder="Search" id="searchbar" /> 
    <ul data-role="listview" id="searchlist"></ul> 

当用户搜索，结果将被添加到列表视图。

我想要下面的代码每次运行一个字母输入到搜索栏？我该如何做到这一点？

if (searchbar.val().length > 2) 
    { 
     $.ajax({ 
      url: "http://clubbedin.zymichost.com/search.php", 
      type: "post", 
      crossDomain: true, 
      data: { 
       'q': value, 
       'userID': userID 
      }, 
      success: function(data) { 
       var json = jQuery.parseJSON(data); 
       for (var i = 0; i < json.length; i ++) 
       { 
        html += '<li><a data-option-id=\"' + json[i].optionid + '\">' + json[i].optionname + '</a></li>'; 
       } 
       $('searchlist').append(html); 
       $('searchlist').listview("refresh"); 
      } 
     }); 
    } 

任何帮助将不胜感激。谢谢！

Answer 1

对此，您可以使用keypress事件。

$(document).on("keypress", "#searchbar", function (e) { 
var searchbar = $(this); 
//your code 
}); 

或者你可以使用input事件处理程序。有关如何做到这一点请参考以下链接的详细信息：http://www.raymondcamden.com/index.cfm/2012/3/27/Example-of-Autocomplete-in-jQuery-Mobile

基本上，它会去是这样的：

$(document).on("input", "#searchbar", function (e) { 
    //your code 
    }); 

另一种方式（也可能是最好的办法）是使用JQM内在机制加载远程数据。 Here's a demo of that. The source code is also provided here.基本上你会使用一个listviewbeforefilter事件来把所有的代码叫做ajax。

Answer 2

您可以使用：

$("#searchlist").on("listviewbeforefilter", function (e, data) { 
    var $ul = $(this), 
    $input = $(data.input), 
    value = $input.val(), 
    html = ""; 
    if (value && value.length > 2) { 
    $.ajax({ 
     url: "http://clubbedin.zymichost.com/search.php", 
     type: "post", 
     crossDomain: true, 
     data: { 
      'q': value, 
      'userID': userID 
     }, 
     success: function(data) { 
      var json = jQuery.parseJSON(data); 
      for (var i = 0; i < json.length; i ++) 
      { 
       html += '<li><a data-option-id=\"' + json[i].optionid + '\">' + json[i].optionname + '</a></li>'; 
      } 
      $ul.html(html); 
      $ul.listview(); 
      $ul.listview("refresh"); 
      $ul.trigger("updatelayout"); 
     } 
    }); 
    } 
});