2

我正在尝试在我的 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" );
            }
        });
     }

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

4

2 回答 2

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 内置机制来加载远程数据。这是一个演示。源代码也在这里提供。基本上，您将使用一个listviewbeforefilter事件来放置所有调用您的ajax.

于 2013-08-18T17:27:52.753 回答
0

您可以使用：

$("#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");
        }
    });
  }
});
于 2013-11-12T14:37:25.677 回答