jQuery UI自动完成 – 没有结果消息

如果没有结果，我试图在下拉菜单中显示“无结果”消息。 因此，例如，如果我在文本字段中键入“ABCD”，并且没有匹配的实体，则显示消息“无结果”。 将显示。

在通过stackoverflow查看完成此操作的各种不同方法并尝试其中一些之后，我仍然无法使其工作。

如果未找到结果，如何在下拉菜单中添加“无结果”消息？

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(); } }); 

我尝试使用以下内容添加if（）语句，但这不起作用。

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

如果我执行以下操作，我可以使用“无结果”文本覆盖第一个条目…

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

…但如果我设置data.indexOf(item) === -1显示任何内容。

我刚刚尝试了以下内容，当没有数据时，它进入循环，但菜单中没有显示“No Results”：

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

我还尝试使用Andrew Whitaker的下面例子，但没有运气：

ANDREW WHITACKER’S FIDDLE： http ： //jsfiddle.net/J5rVP/128/

消息来源： http ： //blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

Answer 1

修改这样的函数以检查数据的长度。

 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 2

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

小提琴

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

更新

在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); } } }); 

Answer 3

对我来说，这个消息发生的原因是：

 MISSING CSS FILES O JQUERY UI 

所以补充：

解决了我的问题