结果为空时,jQuery自动完成显示“无数据”错误消息

时间:2009-11-09 05:24:55

标签: jquery jquery-plugins autocomplete message

我正在使用JörnZaefferer的jQuery Autocomplete plug-in。对数据工作得很好。我试图通过显示“无结果”错误消息自定义功能,当没有从OnChange函数返回结果(键击)。我希望消息显示在结果显示的同一div中。因此,当您在输入中输入字母时,div将保持可见但结果将替换为消息。没有什么花哨的造型,只是纯文本。

我可以让消息显示但是它会通过保留它而不再返回显示结果来破坏功能(如果你删除了一些字母)。

功能示例是qantas目的地自动完成www.qantas.com.au/travel/airlines/home/au/en


更新

在插件中我添加了函数

function NoResults() {

        var wasVisible = select.visible();
        clearTimeout(timeout);
        stopLoading();
        var resultText = $('.ac_results').html();
        var errorMessage = "There are no results that match your request. Please try again.";
        //alert(resultText);
        if (resultText.indexOf(errorMessage) == -1) {
            $('.ac_results').append(errorMessage);
        }

};

然后在请求函数中我将其更改为

function request(term, success, failure) {

        if (!options.matchCase)
            term = term.toLowerCase();
        var data = cache.load(term); if (data && data.length) { success(term, data); }
        else if ((typeof options.url == "string") && (options.url.length > 0)) {
            var extraParams = { timestamp: +new Date() }; $.each(options.extraParams, function(key, param) { extraParams[key] = typeof param == "function" ? param() : param; });
            $.ajax({ mode: "abort", port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: $.extend({ q: lastWord(term), limit: options.max }, extraParams),
                success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); }
            });
        }
        else {
            select.emptyList();
            // failure(term);
            NoResults();
        }
};

我现在唯一的问题是,一旦显示错误消息并且您更改输入以便再次返回结果,错误消息仍然位于结果列表的底部。

1 个答案:

答案 0 :(得分:0)

我为您的问题找到了解决方案。使用“解析”选项,您将无法在其文档中找到此选项,我检查了它的源代码找到此选项(检查第373行)。

您可以像这样使用此插件:

$("#suggest4").autocomplete('http://jquery.bassistance.de/autocomplete/demo/search.php', {
  width: 300,
  multiple: true,
  matchContains: true,
  formatItem: formatItem,
  formatResult: formatResult,
  parse: function(data){
    var parsed = [];
    var rows = data.split("\n");
    for (var i=0; i < rows.length; i++) {
      var row = $.trim(rows[i]);
      if (row) {
        row = row.split("|");
        parsed[parsed.length] = {
          data: row,
          value: row[0],
          result: formatResult(row, row[0]) || row[0]
        };
      }
    }

    if (parsed.length == 0) {
      row = ['no results', null];
      parsed[parsed.length] = {
        data: row,
        value: row[0],
        result: formatResult(row, row[0]) || row[0]
      };
    }
    return parsed;
  }
});

但我认为最好的解决方案是修改Autocomplete插件并添加“noResults”之类的事件。您可以建议作者添加此事件: - )