无法呈现HTML jQuery的自动完成MVC4 [英] Unable to render html in jquery autocomplete MVC4
问题描述
我得到这个错误无法得到renderItem财产。
I'm getting this error "unable to get property of renderItem".
jQuery的code
Jquery Code
$("#term").autocomplete({
// minLength: 1, // require atleast 2 characters to use
source: function (req, resp) { // get JSON object from SearchController
$.ajax({
url: "/Search/AutoComplete", // SearchController JsonResult
type: "POST",
dataType: "json",
data: { term: req.term },
success: function (data) {
resp($.map(data, function (item) {
return { label: item.Name, value: item.Name, imageURL: item.ImageURL, id: item.ProductId };
}
));
}
});
},
select: function (event, ui) { // keyword selected; parse values and forward off to ProductController's ViewProduct View
var selected = ui.item;
var mdlNum, mdlName;
if (selected.value !== null) {
var array = selected.value.split(' ');
mdlNum = array[0].toLowerCase();
mdlName = selected.value.replace(array[0], '').trim().toLowerCase().replace(/[^a-z0-9]+/g, ' ');
window.location.replace('http://' + location.host + '/Search/Refine?ref=' + mdlNum + '' + mdlName);
window.location.replace('http://' + location.host + '/Category/Details/' + selected.id);
}
},
open: function () { $('ul.ui-autocomplete').addClass('opened') },
close: function () { $('ul.ui-autocomplete').removeClass('opened').css('display', 'block'); }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
//var inner_html = '<a><div id="example" class="k-content"><div class="demo-section"><div class=".customers-list img"><img src="' + "../common/theme/images/gallery/3.jpg" + '"></div><div class="customers-list h3">' + item.label + '</div><div class="customers-list p">' + item.description + '</div></div></div></a>';
var newText = String(item.value).replace(
new RegExp(this.term, "gi"),
"<strong>$&</strong>"
// "<span class='ui-state-highlight'>$&</span>"
);
var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.imageURL + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.id + '</div></div></a>';
return $("<li></li>")
.data("item.autocomplete", item).append(inner_html)
.appendTo(ul);
};
另一件事,我想我请在下拉列表显示,如果没有结果发现。就像在soundcloud.com搜索字段。请帮我在哪里,为什么我得到这个错误。 问候
Another thing I want to display in the dropdown as I type and if there is no result found. Just like the search field on soundcloud.com. please help me where and why I'm getting this error. Regards
推荐答案
jQuery UI的自动完成需要与刚标签
和值数据源
为每个项目的属性。即使您的项目有额外的属性: IMAGEURL
和 ID
,这些将被忽略,将无法在你的选择
回调或 _renderItem
的功能。
jQuery UI Autocomplete needs a datasource with just label
and value
properties for each item. Even though your items have extra properties: imageURL
and id
, those will be ignored and won't be available in your select
callback or _renderItem
function.
所以,你需要存储的其他属性其他地方。我建议设置值
您自动完成项目的 ID
您的服务提供,然后保持为一个单独的缓存中图像的URL。
So you need to store those other properties somewhere else. I recommend setting the value
of your autocomplete items to the ID
your service provides, and then maintaining a separate cache for the image URLs.
事情是这样的:
imageUrls = {};
...
resp($.map(data, function (item) {
imageUrls[item.ID] = item.ImageURL;
return { label: item.Name, value: item.ID };
}
...
var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + imageUrls[item.value] + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.value + '</div></div></a>';
另请参阅:
http://api.jqueryui.com/autocomplete/#option-source
http://api.jqueryui.com/autocomplete/#method-_renderItem
这篇关于无法呈现HTML jQuery的自动完成MVC4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!