代码之家 › 专栏 › 技术社区 › Victor

jquery用户界面自动完成,没有结果时显示一些内容

autocomplete jquery-ui

Victor · 技术社区 · 15 年前

我有以下代码:

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

    };

目前,它只在有搜索结果时显示下拉式自动完成功能。当找不到任何东西时,我希望它显示“找不到匹配项”。我应该在代码中添加什么?

谢谢。

4 回复 | 直到 14 年前

Chris Jackson 15 年前

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

mr.b 15 年前

goksel 14 年前

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

Theisen 14 年前

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