jquery-ui - jQuery UI 自动完成，没有结果时显示一些内容

Question

我有以下代码:

// Autocomplete search
    $("#shop_search").autocomplete({
      source: '<%= spotify_search_path(:json) %>',
      minLength: 1,
      select: function(event, ui) {
        append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web);
        $("#shop_search").val('');
      }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + "<span class='autocomplete_link'>" + item.name + "</span>" + "<br />" + "<span class='autocomplete_address'>" + item.address_geo + "</span>" + "</a>" )
      .appendTo( ul );

      $(".ui-autocomplete-loading").ajaxStart(function(){
        $(this).show();
      });

      $(".ui-autocomplete-loading").ajaxStop(function(){
        $(this).hide();
      });

    };

目前仅在有搜索结果时显示下拉自动完成。我希望它在找不到任何内容时显示“未找到匹配项”。我应该在代码中添加什么？

谢谢。

Answer 1

如果您对源使用 jQuery ajax 调用，则可以在结果中附加“未找到结果”(如果没有)。然后，在 select 方法上，您可以简单地检查该项目是否是您添加的“未找到结果”项目，如果是，则不执行任何操作。在这里，我通过检查 id 是否等于 0 来识别这一点。

$("#shop_search").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "<%= spotify_search_path(:json) %>",
            data: {
                term: request.term
            },
            success: function (data) {
                if (data.length == 0) {
                    data.push({
                        id: 0,
                        label: "No results found"
                    });
                }
                response(data);
            }
        });
    },
    select: function (event, ui) {
        if (ui.item.id != 0) {
            append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web);
            $("#shop_search").val('');
        }
    }
});

您需要在模板上做一些工作才能正确显示“未找到结果”，但这应该会让您走上正确的道路。