Question

我正在尝试在我的jquery移动页面上创建搜索功能，

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

搜索框jQuery Mobile

2 个答案: