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

Posted 2023-05-08

【中文标题】在自动完成中仅渲染某些项目

【英文标题】：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 函数中需要一个条件语句。

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

希望对您有所帮助。