jQuery UI autocomplete выделить полное слово вместо подстрочной подстроки

Question

Я создаю функцию автозаполнения. Все работает отлично. Но мне нужно выделить все слово, содержащее согласованный текст. Например:

Если пользователь "Ар" Я получаю

Ap PLE
Ap эсов
Битвы Ара эсов

Что я хочу:

Apple,
Apes
Битва Apes

$(document).ready(function(){ 
    $("#searchresult").autocomplete({ 
     source  :'autocomplete.php', 
     minLength : 1, 
     selectFirst : true, 
     matchContains: true, 
     scroll  : false, 
     appendTo  : '#menucontainer', 
     autoFocus : true, 
     select  : function(event, ui) { 
      window.location.href = ui.item.value; 
      ui.item.value=ui.item.label; 
     } 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     var term = this.element.val(), 
      regex = new RegExp('(' + term + ')', 'gi'); 
     t = item.label.replace(regex , "<b>$&</b>"); 
     return $("<li></li>").data("item.autocomplete", item) 
      .append("<a style='height:30px;'><div style='width: 100%; float: left;overflow: hidden; white-space:nowrap; text-overflow: ellipsis; text-align: left;'>" + t + "</div><div style='right: 0; position: relative; float:right; font-size: 11px;margin-top:-15px; color: #b3b3b3;'>" + item.cate + "</div></a>") 
      .appendTo(ul); 
    } 
}); 

Answer 1

Существует ошибка в вашем Regex. Вы соглашаетесь с этим термином, чтобы соответствовать всему слову. Попробуйте следующее:

regex = new RegExp('\\S*' + term + '\\S*', 'gi'); 

Это регулярное выражение будет соответствовать всем вокруг слова, которое не является пространством.

Answer 2

слегка Измените регулярное выражение и использовать $.ui.autocomplete.escapeRegex функцию:

var term = this.term, 
    regex = new RegExp('\\S*' + $.ui.autocomplete.escapeRegex(term) + '\\S*', 'gi') 

Ниже приведен пример оптимальной для JQuery UI 1.11.1:

$(function() { 
 
    $("#searchresult").autocomplete({ 
 
    source: ["Apple", "America", "Apes", "Battle of the Apes"], 
 
    minLength: 1 
 
    }).data("ui-autocomplete")._renderItem = function(ul, item) { 
 
    var term = this.term, 
 
     regex = new RegExp("\\S*" + $.ui.autocomplete.escapeRegex(term) + "\\S*", "gi"), 
 
     label = item.label.replace(regex, '<b style="background: gray;">$&</b>'), 
 
     $link = $("<a></a>").html(label); 
 
    return $("<li></li>").append($link).appendTo(ul); 
 
    } 
 
});

@import url("http://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 

 
<input id="searchresult" type="text" placeholder="Type something">