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。这很容易在条件语句中查找。

希望有帮助。

仅以自动完成方式呈现某些项目

1 个答案: