搜索框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"); 
     } 
    }); 
    } 
});