jQuery自动完成显示Html内容
在我的Asp.Net项目中,我在一个文本框中使用了jQuery自动完成 它的工作原理与预期一样,但我发现其中的一个问题是,当我按下keydown或keydup键时,它会在文本框中显示Html内容 我的代码:jQuery自动完成显示Html内容,jquery,jquery-ui,jquery-ui-autocomplete,Jquery,Jquery Ui,Jquery Ui Autocomplete,在我的Asp.Net项目中,我在一个文本框中使用了jQuery自动完成 它的工作原理与预期一样,但我发现其中的一个问题是,当我按下keydown或keydup键时,它会在文本框中显示Html内容 我的代码: $(".inputText").autocomplete({ source: function (request, response) { $.ajax({
$(".inputText").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/URL/Path",
data: JSON.stringify({ prefixText: inputvalue.value }),
dataType: "json",
success: function (data) {
var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
response($.map(data.d, function (item) {
return {
label: item.split('$')[0].replace(regex, "<b style='background-color: #efbc04;font-color:black;'>$1</b>"),
val: item.split('$')[1],
desc: item.split('$')[2]
}
}))
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
$(".inputText").val(ui.item.desc);
__doPostBack("txtFirstName", "OnTextChanged");
return false;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a>' + item.label + '</a>')
.appendTo(ul);
};
您将希望使用焦点事件
工作示例:
JavaScript
您将看到一些您可能想要实现的其他更改 我看到您在AJAX中传递inputvalue.value,但我看不到这是在哪里定义的。我建议使用request.term。你能用一些示例数据设置一个提琴来共享吗?我们能够创建以下提琴:-我认为问题是HTML元素不能存储在文本框中。元素需要一个字符串作为值。该字符串不会被渲染。我认为您要做的是使用样式来格式化字段中的文本,而不是尝试使用标记。
$(function() {
$(".inputText").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/echo/json/",
data: JSON.stringify({
prefixText: request.term
}),
dataType: "json",
success: function(data) {
var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
response($.map(data.d, function(item) {
return {
label: item.split('$')[0].replace(regex, "<b style='background-color: #efbc04;font-color:black;'>$1</b>"),
val: item.split('$')[1],
desc: item.split('$')[2]
}
}))
},
error: function(result) {
alert("Error");
}
});
},
focus: function(event, ui) {
$(".inputText").val(ui.item.desc);
return false;
},
select: function(event, ui) {
$(".inputText").val(ui.item.desc);
__doPostBack("txtFirstName", "OnTextChanged");
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append('<div>' + item.label + '</div>')
.appendTo(ul);
};
});