我想在jquery mobile的 ul 元素中推送自动完成源的结果列表,我怀疑开放事件可以帮助我在这里。如果你们中的任何一个人已经取得了这样的成绩,对我来说会很有帮助(jquery新手)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#searchText").autocomplete({
source: '/CRM/SearchResult',
minLength: 1,
appendTo: "#searchResultList",
open: function () {
}
});
});
</script>
<input type="text" name="searchText" id="searchText" />
<ul data-role="listview" id="searchResultList">
</ul>
答案 0 :(得分:1)
我通过在Firebug的帮助下提取jquermobile标签的准确性来实现所需的输出(我不确定这是不是一个好主意,但它对我来说很有用):
<script type="text/javascript">
$(function () {
$("#searchTextBox").change(function (e) {
var searchTerm = $("#searchTextBox").val();
if (searchTerm.length == 0) {
$('ul li').remove();
}
else if (searchTerm.length >= 2) {
$('ul li').remove();
$.getJSON(
'/XYZ/SearchResult',
{ term: searchTerm },
function (response) {
$.each(response, function (index) {
var entityID = response[index].id;
var displayText = response[index].label;
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/' + entityID + '" target="_self" class="ui-link-inherit">' + displayText + '</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#ui-listview");
});
});
}
});
});
</script>
}
<div class="ui-input-search">
<input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null"
id="searchTextBox" width>
</div>
<p />
<div class="content-primary">
<ul data-role="listview" class="ui-listview" id="ui-listview">
</ul>
</div>
答案 1 :(得分:0)
你确实可以做到这一点。您需要为open
提供回调函数,并在打开自动完成菜单后触发此错误。因此,您的功能应该执行以下操作。首先,获取无序列表容器的句柄:
var list = $('#searchResultList');
...然后迭代搜索结果($.each()
或类似的应该)。对于每个结果值,append
是ul
的列表项:
list.append('<li>' + YOUR_RESULT_VALUE + '</li>');
...然后最后你需要刷新列表,以便jQM正确更新UI:
list.listview('refresh');
答案 2 :(得分:0)
如果你仍然感兴趣,但我怀疑你是
$("#textbox-filter").autocomplete({
minLength: 2,
source: '/AutoComplete/XYZ',
search: function (event, ui) {
$("ul#listview li.ac").remove();
},
open: function (event, ui) {
$("ul#listview").listview('refresh');
}
})
.data("autocomplete")._renderItem = function (ul, item) {
$('<li class="ac"><a href="#one">' + item.value + '</a></li>').appendTo("ul#listview");
return null;
};