Listview 搜索框jQuery Mobile

我试图在我的jquery手机页面上实现搜索功能

HTML:

当用户搜索时，结果将附加到listview

我希望每次在搜索栏中键入字母时都运行以下代码？我如何做到这一点

if（searchbar.val（）.length>2）
{
$.ajax({
url:“http://clubbedin.zymichost.com/search.php",
类型：“post”，
跨域：是的，
数据：{
“q”：值，
“userID”：userID
},
成功：功能（数据）{
var json=jQuery.parseJSON（数据）；
for（var i=0；i'；
}
$（'searchlist'）.append（html）；
$（'searchlist'）.listview（“刷新”）；
}
});
}

---

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

您可以使用

按键

事件进行此操作

$（document）.on（“按键”，“搜索栏”，函数（e）{
var searchbar=$（此项）；
//你的代码
});

或者您可以使用

input

事件处理程序。有关如何执行此操作的更多信息，请参阅此链接：

基本上是这样的：

$（document）.on（“输入”，“搜索栏”，函数（e）{
//你的代码
});

另一种方法（可能是最好的方法）是使用jQM内置机制加载远程数据。基本上，您将使用

listviewbeforefilter

事件来放置调用

ajax

的所有代码

您可以使用：

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

$（“#搜索列表”）。关于（“listviewbeforefilter”，函数（e，数据）{
var$ul=$（此），
$input=$（data.input），
value=$input.val（），
html=“”；
如果（value&&value.length>2）{
$.ajax({
url:“http://clubbedin.zymichost.com/search.php",
类型：“post”，
跨域：是的，
数据：{
“q”：值，
“userID”：userID
},
成功：功能（数据）{
var json=jQuery.parseJSON（数据）；
for（var i=0；i'；
}
$ul.html（html）；
$ul.listview（）；
$ul.列表视图（“刷新”）；
$ul.trigger（“updatelayout”）；
}
});
}
});