jquery - 如何仅突出显示 Jquery Autocomplete 匹配的单词？

Question

我正在使用 Jquery Autocomplete 从列表中搜索，它工作正常，但我只需要突出显示列表中匹配单词的背景，我该怎么做呢？

这是我到目前为止所尝试的。 小提琴链接

     var availableTags = [
     'DHA ABC',
     'DHA BB',
     'DHA CC',
    ];


    $('#tags').autocomplete({

    source: availableTags,
    search: function(event, ui) {
      $('#wrapper').empty();
    },
    select: function(e, ui) {
      $(this).val(ui.item.name);
      return false;
    },
    }).data('autocomplete')._renderItem = function(ul, item) {
    matchFound = 0;
    var cls = this.options.highlightClass;
    var inp = $("#tags").val().split(" ");
    var template = "<span class='" + cls + "'>$1</span>";
    var items = item.label.split(" ");
    for (var i = 0; i < items.length; i++) {
      for (var j = 0; j < inp.length; j++) {
        index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
        if (index > -1) {
          matchFound += 1;
        }
      }
      if (matchFound == inp.length) {
        return $('<div class="element"></div>')
          .data('item.autocomplete', item.label)
          .append('<a href="#">' + item.label + '</a>')
          .appendTo($('#wrapper'));
        break;

        }
      }
     };

标签： jqueryjquery-ui-autocomplete

Answer 1

var availableTags = [
  'DHA 11 Rahbar',
  'DHA City',
  'DHA Defence',
  'Dhalloke',
  'Dharampura',
  'DHA 11 Rahbar Phase 1',
  'DHA 11 Rahbar Phase 2',
  'DHA 11 Rahbar Phase 2 Extension',
  'DHA 9 Town',
  'DHA Phase 1',
  'DHA Phase 10',
  'DHA Phase 10',
  'DHA Phase 11 - Halloki Gardens',
  'DHA Phase 2',
  'DHA Phase 3',
  'DHA Phase 4',
  'DHA Phase 5',
  'DHA Phase 6',
  'DHA Phase 7',
  'DHA Phase 8',
  'DHA Phase 9 Prism',
  'DHA - EME Cottages'

];

$('#tags').autocomplete({

    source: availableTags,
    search: function(event, ui) {
      $('#wrapper').empty();
    },
    select: function(e, ui) {
      $(this).val(ui.item.name);
      return false;
    },
  })

  .data('autocomplete')._renderItem = function(ul, item) {
    matchFound = 0;
    var cls = this.options.highlightClass;
    var inp = $("#tags").val().split(" ");
    var template = "<span class='" + cls + "'>$1</span>";
    var items = item.label.split(" ");
    for (var i = 0; i < items.length; i++) {
      for (var j = 0; j < inp.length; j++) {
        index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
        if (index > -1) {
          matchFound += 1;
        }
      }
      if (matchFound == inp.length) {
      
      var str=item.label;
      str = str.replace(inp[0], '<span style="color: yellow;">'+inp[0]+'</span>');
  //  console.log(inp);
        return $('<div class="element">'+str+'</div>')
          .data('item.autocomplete', str)
         // .append('<a href="#">' + item.label + '</a>')
          .appendTo($('#wrapper'));
      }
    }
  };

body {
  font-size: 12px;
}

#wrapper {
  margin-top: 50px;
}

.element {
  border: 1px solid PowderBlue;
}

.ui-autocomplete {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/sunny/jquery-ui.css" rel="stylesheet"/>
<label for="tags">Tags:</label>
<input id="tags" />
<div id="wrapper"></div>

小提琴：http: //jsfiddle.net/sumeshnu/gwethjq0/

使用 span 标签将标签中匹配的字符替换为背景色