Jquery手機自動完成到列表視圖

我喜歡在文本框中爲我的jquery移動頁面添加自動完成功能，這樣當用戶輸入時應該以列表視圖格式顯示結果。下面的代碼顯示了結果，但不是列表視圖格式。有人可以指出如何解決它。謝謝。Jquery手機自動完成到列表視圖

<!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>

來源

2012-05-31 lazyguy

jQuery UI的不jQuery Mobile的發揮出色。我閱讀了一篇關於實施自己的自動完成功能的人的帖子，可能想要給它一個閱讀。 http://www.raymondcamden.com/index.cfm/2012/3/27/Example-of-Autocomplete-in-jQuery-Mobile – Ryan

你需要調用您的內容列表視圖（）函數中插入新的內容後：

$('#suggestions').listview();

詳情請參見Elijah Manor's explanation。

來源

2012-05-31 20:22:00 davidethell

嘗試在您的ajax成功函數中調用listview刷新方法。

$('#suggestions').listview('refresh');

來源

2012-05-31 20:26:03 codaniel

codaniel我嘗試過，但仍然無法正常工作。所以基本上我看到了列表視圖，但也看到了一個更多的無格式列表。我所尋找的只是列表視圖，但不知何故，帶有重點的非格式化列表也是最重要的。 – lazyguy

你是否在你的代碼中加入了'$（'＃suggestions'）。append（listitem）.listview（'refresh'）;'' – codaniel

試試這個

在<li>標籤刪除類..... class="ui-btn ui-btn-icon-right ui-li "

然後顯示在列表視圖格式結果

來源

2012-06-01 06:52:08

Jquery手機自動完成到列表視圖

回答

相關問題