Jquery ui Jquery mobile自动完成到listview
我喜欢在文本框中为我的jquery移动页面添加自动完成功能，这样当用户输入时，它应该以listview格式显示结果。下面的代码显示结果，但不是listview格式。有人能指出怎么修理吗。谢谢Jquery ui Jquery mobile自动完成到listview,jquery-ui,jquery,jquery-mobile,Jquery Ui,Jquery,Jquery Mobile,我喜欢在文本框中为我的jquery移动页面添加自动完成功能，这样当用户输入时，它应该以listview格式显示结果。下面的代码显示结果，但不是listview格式。有人能指出怎么修理吗。谢谢 <!DOCTYPE HTML> <html> <head> <title>Finder</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/j
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="/XYC/XDetail/' + item.cityName + '" target="_self" class="ui-link-inherit">' + item.zipcodeId + '</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
发现者
输入{文本转换：大写；}
$（文档）.ready（函数（）{
$（“#firstinputbox”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
数据类型：“json”，
数据：{
马克斯罗：10，
startsWith:request.term
},
成功：功能（数据）{
响应（$.map（data.zipcodes，函数（项））{
var listItem='；
$（listItem）。附录（#建议）；
返回{
标签：item.cityName+”、“+item.zipcodeId+”、“+item.state、，
值：item.cityName
}
}));
}
});
},
最小长度：1，
打开：函数（）{
},
关闭：函数（）{
$（'ul li'）。删除（）；
//应将该值附加到文本框
}
});
});
在此处输入条件
$('#suggestions').listview();
有关详细信息，请参阅。尝试在ajax成功函数中调用listview刷新方法
$('#suggestions').listview('refresh');
class=“ui-btn ui-btn图标右ui-li”然后以列表视图格式显示结果jqueryui与jquerymobile不兼容。我读了一篇关于某人实现他们自己的自动完成功能的帖子，可能想读一读。科达尼尔：我试过了，但还是不起作用。所以基本上我看到了listview，但也看到了一个未格式化的列表。我要找的只是listview，但不知何故，带有要点的不可原谅列表也在上面。您是否在代码
$（'#建议'）.append（listitem）.listview（'refresh'）中添加了类似的内容