如何仅突出显示Jquery自动完成匹配词？

Question

我正在使用Jquery自动完成功能搜索列表，效果很好，但是我需要突出显示列表中匹配单词的背景，怎么点这个呢？

这是我到目前为止尝试过的。 fiddle link

$(EXEC):
    $(CXX) $(CXXFLAGS) -o $@ $^

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标签用背景色替换标签中匹配的字符

Answer 2

我为您的案例创建了示例fiddle，具有用于突出显示的按键功能

function highlite(label, substring) {
var start = label.toLowerCase().indexOf(substring.toLowerCase());
var end = start + substring.length;
label = label.substr(0, start) +
    '<span class="highlite">' +
    label.substr(start, end - start) +
    '</span>' +
    label.substr(end);
return label;

}

Answer 3

非常简单，您只需要像下面这样设置div的属性

<div class="element" style="background-color:green; width:30%;"></div>

您的代码应该是这样的。

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) {
        return $('<div class="element" style="background-color:green; width:30%;"></div>')
          .data('item.autocomplete', item.label)
          .append('<a href="javascript:void(0);">' + item.label + '</a>')
          .appendTo($('#wrapper'));
        break;

      }
    }
  };

选中此fiddle