Рендеринг только определенных элементов в автозаполнении

Question

Я создал автозаполнение и применил рендер, так что я могу получить различную информацию в двух разных строках, проблема у меня заключается в том, что я не хочу, чтобы этот стиль применялся к «Ответу», который не показывает совпадений,Можно ли это сделать?

    $('#sl').autocomplete({
        source: '/autocomplete',
        select: function(event, ui) {
            event.preventDefault();
            $("#country").val(ui.item.country); // save selected id to hidden input
            $("#city").val(ui.item.value); // save selected id to hidden input
            $('#sl').val(ui.item.label)

        },
        focus: function(event, ui){
            event.preventDefault();
            $('#sl').val(ui.item.label);
        },
        response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { value:"",label:'No results found'  };
            ui.content.push(noResult);

        }
    }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li>" )
                .append( "<div>" + item.label + "<br>" + item.countryname + "</div>" )
                .appendTo( ul );
    }

Answer 1

Расширяя мой комментарий, вы можете включить условное выражение при отображении элемента.

$(function() {

  var countries = [{
    country: "UK",
    label: "Site 1",
    value: "London"
  }, {
    country: "UK",
    label: "Site 2",
    value: "Manchester"
  }];

  $('#sl').autocomplete({
    source: countries,
    select: function(event, ui) {
      event.preventDefault();
      $("#country").val(ui.item.country); // save selected id to hidden input
      $("#city").val(ui.item.value); // save selected id to hidden input
      $('#sl').val(ui.item.label)

    },
    focus: function(event, ui) {
      event.preventDefault();
      $('#sl').val(ui.item.label);
    },
    response: function(event, ui) {
      if (!ui.content.length) {
        var noResult = {
          value: "",
          label: 'No results found'
        };
        ui.content.push(noResult);

      }
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    var li = $("<li>");
    if (item.country == undefined) {
      li.append("<div>" + item.label + "</div>");
    } else {
      li.append("<div>" + item.label + "<br>" + item.country + "</div>");
    }
    return li.appendTo(ul);
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="search-homepage-input">
  <form>
    <div class="col-md-9">
      <input type="text" name="city" class="form-control" max-length="55" placeholder="Eg. England, London, Manchester" id="sl" />
    </div>
    <div class="col-md-3">
      <button type="submit" class="btn btn-homepage">Find Teams</button>
    </div>
  </form>
</div>

При обратном вызове response вы не определяете индекс country, поэтому он равен undefined.Это облегчает поиск условного выражения.

Надеюсь, это поможет.