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是否等于零来确定。

$("#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('');
        }
    }
});

您需要对模板进行一些操作才能正确显示“找不到结果”，但这样可以让您走上正确的轨道。

Answer 2

您可以检查项目是否为空或0。如果item为0或null，则追加“找不到匹配项”，否则追加该项。这基本上就是整个逻辑。

Answer 3

可能有帮助

source: function( request, response ) {
    $.getJSON( url, {
        term: extractLast( request.term )
    }, response )
    .error(function() {
        console.log("no results");
    });
},

Answer 4

$( "#jsonNameSearch" ).autocomplete({
    // This is the source of the autocomplete, in the success method if the 
    // length of the response is zero then highlight the field indicating no match.
    source: function( request, response ) {
        $.getJSON( 'jsonAutocomplete.ajax?dataType=drivers', {
            term: request.term 
        }, response )
        .success(function(data) { 
            (data.length == 0) ? $( "#jsonNameSearch" ).addClass('nomatch') : $( "#jsonNameSearch" ).removeClass('nomatch');
        });
    },      
    select: function( event, ui ) {         
        if (ui.item) self.location.replace('driverModify.htm?id='+ui.item.id);          
    }           
});

jQuery UI自动完成，在没有结果时显示

4 个答案: