javascript - ejemplo - jQuery UI autocompletar: no hay mensaje de resultados

jquery ui autocomplete ajax

Question

Estoy intentando que aparezca el mensaje "No hay resultados" en el menú desplegable si no hay resultados. Entonces, por ejemplo, si escribo "ABCD" en el campo de texto, y no hay ninguna entidad que coincida, aparecerá el mensaje "Sin resultados". será mostrado.

Después de buscar en Stackoverflow las diferentes formas de lograr esto y probar algunas de ellas, aún no puedo hacer que funcione.

¿Cómo puedo agregar un mensaje "Sin resultados" al menú desplegable cuando no se encuentran resultados?

jQuery:

 $element.autocomplete({
source: function (request, response) {
$.ajax({
url: thUrl + thQS,
type: "get",
dataType: "json",
cache: false,
data: {
featureClass: "P",
style: "full",
maxRows: 12
},
success: function (data) {
response($.map(data, function (item) {
if (data.indexOf(item) === -1) {
return { label: "No Results." }
} else {
return {
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
}
}
}));
}
});
},
minLength: that.options.minLength,
select: function (event, ui) {
reRenderGrid();
}
});

He intentado agregar una sentencia if () con lo siguiente, pero no funcionó.

if (data.length === 0) {
// Do logic for empty result.
}

Puedo sobrescribir la primera entrada con el texto "No Result" si hago lo siguiente ...

if (data.indexOf(item) === 0) {
return {
label: "No Results."
}

... pero si configuro data.indexOf(item) === -1 no aparece nada.

Hace poco intenté lo siguiente, y cuando no hay datos, estos entran en el bucle, sin embargo, "No hay resultados" no se muestra en el menú:

 success: function (data) {
response($.map(data, function (item) {
return {
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
}
}));
if (data.length === 0) {
label: "No Results."
}
}

También intenté usar el siguiente ejemplo de Andrew Whitaker sin suerte:

ANDREW WHITACKER''S FIDDLE: http://jsfiddle.net/J5rVP/128/

FUENTE: http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

Answer 1

Mi respuesta es casi idéntica a @neelmeg y @Trever, pero he agregado una comprobación adicional, por lo que el usuario no podrá seleccionar el mensaje "sin resultados":

$(".my-textbox").autocomplete({
minLength: 2,
open: function () { $(''.ui-autocomplete'').css(''z-index'', 50); },
source: function (request, response) {
$.ajax({
url: "/some-url",
type: "POST",
dataType: "json",
data: { prefix: request.term, __RequestVerificationToken: token },
success: function (data) {
if (!data.length) {
var result = [{ label: "no results", value: response.term }];
response(result);
}
else {
response($.map(data, function (item) {
return { label: item.someLabel, value: item.someValue };
}))
}
}
})
},
select: function (event, ui) {
var label = ui.item.label;
if (label === "no results") {
// this prevents "no results" from being selected
event.preventDefault();
}
else {
/* do something with the selected result */
var url = "some-url"
window.location.href = url;
}
}
});

Answer 2

Modifique la función como esta para verificar la longitud de los datos.

success: function (data) {
if(!data.length){
var result = [
{
label: ''No matches found'',
value: response.term
}
];
response(result);
}
else{
// normal response
response($.map(data, function (item) {
return {
label: item.CompanyName + " (" + item.SymbolName + ")",
value: item.CompanyName
}
}));
}
}

Answer 3

Para mi la razón por la que ocurrieron estos mensajes fueron:

MISSING CSS FILES O JQUERY UI 

así que añadiendo:

<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />

resolví mi problema

Answer 4

 if (!ui.content.length) {
var noResult = { value:"",label:"No results found" };
ui.content.push(noResult);
//$("#message").text("No results found");
} 

Violín

http://jsfiddle.net/J5rVP/129/

Actualizar

Coloque el código al final de la configuración de autocompletar justo después de select: function (event, ui) {..}

 ..........
minLength: that.options.minLength,
select: function (event, ui) {
reRenderGrid();
}, //HERE - make sure to add the comma after your select
response: function(event, ui) {
if (!ui.content.length) {
var noResult = { value:"",label:"No results found" };
ui.content.push(noResult);
}
}
});