我在这段代码中遇到错误。有谁能够帮助我?
<h4>search:<input type="text" id="name-list" /></h4>
<script type="text/javascript" language="javascript">
$(function () {
$("#name-list")
.autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Searchuser", type: "POST", dataType: "json",
data: { searchText: request.term, maxResults: 10 }
})
return false;
},
minLength: 1
}).data("autocomplete")._renderItem = function (ul, item) {
var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.PicLocation + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.DisplayName + '</div></div></a>';
return $("<li></li>")
.data("item.autocomplete", item)
.append(inner_html)
.appendTo(ul);
};
});
</script>
从服务器正确接收数据。我哪里做错了?
最佳答案
@JoeFletch 感谢您的帮助。
我对代码进行了这些更改,然后效果很好。 这是我使用的一些CSS。
<style type="text/css">
DIV.list_item_container {
height: 90px;
padding: 0px;
}
DIV.image {
width:90px;
height: 90px;
float: left;
}
DIV.description {
font-style: italic;
font-size: 1.1em;
color: gray;
padding: 5px;
margin: 5px;
}
#name-list
{
width: 300px;
}
</style>
这是我的脚本
$(document).ready(function () {
$('#name-list').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Searchuser",
data: { searchText: request.term, maxResults: 10 },
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return {
value: item.DisplayName,
avatar: item.PicLocation,
rep: item.Reputation,
selectedId: item.UserUniqueid
};
}))
}
})
},
select: function (event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label)
: "Nothing selected, input was " + this.value);
return false;
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.avatar + '"></div><div class="label"><h3> Reputation: ' + item.rep + '</h3></div><div class="description">' + item.label + '</div></div></a><hr/>';
return $("<li></li>")
.data("ui-autocomplete-item", item)
.append(inner_html)
.appendTo(ul);
};
});
谢谢@Joe。我更新了答案。
关于jquery-ui - Jquery UI 自动完成图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12670956/