在自动完成中仅渲染某些项目答案

【问题标题】：Rendering only certain items in autocomplete在自动完成中仅渲染某些项目
【发布时间】：2019-04-26 11:22:17
【问题描述】：

我创建了一个自动完成并应用了一个渲染，以便我可以在两条不同的行上获得不同的信息，我遇到的问题是我不希望将此样式应用于显示不匹配的“响应” .这个可以吗？

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

【问题讨论】：

我怀疑你的_renderItem 函数中需要一个条件语句。

标签： javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案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。这使得在条件语句中查找变得很容易。

希望对您有所帮助。

【讨论】：