I'm trying to add an autocomplete widget to my webpage, a personalized one. After having several problems with my own configuration, I decided to try the official example directly in my webpage, doing everything I read there, and replacing this
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
.appendTo( ul );
};
with this
.data("uiAutocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<div>" + item.label + "<br>" + item.desc + "</div>")
.appendTo(ul);
};
because I'm using jQuery UI 1.10.4 and I can't update it (my boss doesn't want me to do that). I couldn't make the example work, and I know that if I make it work, I won't have problems to adapt it to what it has to do.
Please, do you know how to make it work? Thanks in advance.
Ok, finally I gave up. The way I overcome the situation was adapting the DTO I was transforming to JSON and sending to the browser to the format that Autocomplete expects. The format has three fields:
{
id: ...,
label: ...,
value: ...
}
After that, I just configured the autocomplete in this way:
$("#<%= nuevoPadrePem.ClientID %>").autocomplete({
minLength: 6,
source: function (request, response) {
var term = request.term;
var result = [];
$.ajax({
url: 'PMENUEVAVERS.aspx/GetResultadosBusqueda',
data: JSON.stringify({ texto: term }),
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (dtos) {
response(dtos.d);
}
});
},
select: function (event, ui) {
var dto = ui.item;
$("#<%= hdSelectedNuevoPadrePem.ClientID %>").val(dto.id);
$("#<%= nuevoPadrePem.ClientID %>").css('color', '#00BE00');
}
})
And it worked without problems.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.