jQuery用户界面自动完成，显示东西的时候没有结果 [英] jQuery UI autocomplete, show something when no results

问题描述

我有以下的code：

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

    };

目前只显示下拉自动完成时，有搜索结果。我想让它显示无匹配找到没事的时候可以找到。我应该加入到code？

Currently it only shows the drop down autocomplete when there is search result. I want it to show "No matches found" when nothing could be found. What should I add into the code?

感谢。

推荐答案

如果您使用jQuery的Ajax调用为源，可以追加到结果未找到结果如果没有任何。然后在选择方法，你可以简单地检查，看看是否该产品已添加的，如果是这样，什么都不做无搜索结果项。在这里，我确定了通过检查，看是否ID是等于零。

If you use a jQuery ajax call for the source, you can append "No results found" to the results if there aren't any. Then on the select method, you can simply check to see if the item is the "no results found" item that you added and if so, do nothing. Here I identified that by checking to see if the id was equal to zero.

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

您需要做你的模板一些工作，以获得正确显示没有找到结果，但这应该让你在正确的轨道上。

You'll need to do some work on your template to get the "no results found" to display properly, but this should get you on the right track.

这篇关于jQuery用户界面自动完成，显示东西的时候没有结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！