Autocomplete UI, выделить несколько слов в тегах

Question

Выделение нескольких слов прекрасно работает без тегов в источнике, но я ищу способ сделать это с помощью тегов.

Например, если поиск является «жо Рамо» результаты должны быть «Джо еу Рамо NES».

$(function() { 
    $("#autocomplete").autocomplete({ 
     source: [ 
      { "label": "<span class=\"item1\">Joey</span> <span class=\"item2\">Ramones</span>"}, 
      { "label": "<span class=\"item1\">Johnny</span> <span class=\"item2\">Ramones</span>"}, 
      { "label": "<span class=\"item1\">Dee Dee</span> <span class=\"item2\">Ramones</span>"}    
     ], 
     minLength: 2 
    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     var searchMask = this.element.val(); 
     var regEx = new RegExp(searchMask, "ig"); 
     var replaceMask = "<b>$&</b>"; 
     var html = item.label.replace(regEx, replaceMask); 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($('<div class="item"></div>').html(html)) 
      .appendTo(ul); 
    } 
}); 

Here is a Fiddle

Спасибо за вашу помощь.

Answer 1

В соответствии с previous post мы можем переопределить методы автозаполнения фильтра для создания наших пользовательских фильтров.

$.ui.autocomplete.filter = function (array, term) { 
    term=term.trim().replace(/\s+/g, '[^]*');// to search multiple words  
    var matcher = new RegExp("(" + term + ")", "i"); 
    return $.grep(array, function (value) { 
     return matcher.test(value.label || value.value || value); 
    }); 
}; 

Для того, чтобы соответствовать "Jo Ramo" узор на "Джо еу Ramo NES" я использовал [^]* в RegExp

наборные элементы выталкиваются _renderItem функции, модифицированной функции в соответствии с требуемой щ (чтобы выделить несколько слов)

function(ul, item) { 
    var searchMask = this.element.val().trim(); 
    var regEx = new RegExp(searchMask, "ig"); 
    var replaceMask = "<b>$&</b>"; 
    var html=$(item.label).text(); // manipulating text only 
    var splitText = searchMask.split(' '); 

    $.each(splitText, function(index, value){ 
     html = html.replace(new RegExp(value, "ig"), replaceMask); 
    });   

    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append($('<div class="item"></div>').html(html)) 
     .appendTo(ul); 
} 

пример: http://codepen.io/anon/pen/zrqQzw