Select2 ищет внутри html отформатированных опций

Question

Я использую select2 widget, и мне нужно отобразить результаты поиска в формате html.

Так я использую это так:

function formatMyItem(myItem) { 
    return defaultEscapeMarkup(myItem.someDescription) + " <strong>(" + myItem.someOtherValue + ")</strong>"; 
    } 

    function defaultEscapeMarkup(markup) { 
    var replace_map = { 
     '\\': '&#92;', 
     '&': '&amp;', 
     '<': '&lt;', 
     '>': '&gt;', 
     '"': '&quot;', 
     "'": '&#39;', 
     "/": '&#47;' 
    }; 

    return String(markup).replace(/[&<>"'\/\\]/g, function (match) { 
     return replace_map[match]; 
    }); 
    } 

    var suggestionValues = []; 
    for (var i = 0; i < myData.length; i++) { 
    var myItem = myData[i]; 
    suggestionValues.push({ 
     id: myItem.someKey, 
     text: formatMyItem(myItem) 
    }); 
    } 

    $mySelect.select2({ 
    width: 'resolve', 
    multiple: true, 
    data: suggestionValues, 
    escapeMarkup: function(m) { 
     // Do not escape HTML in the select options text 
     return m; 
    } 
    }); 

Но теперь, когда пользователь ищет что-то, что термин ищется внутри HTML опции.

Например, если пользователь ищет «сильный» (при условии, что некоторые описания могут содержать слово «сильный»), тогда select2 предложит все значения (потому что все они содержат «сильные»).

Кроме того, когда пользователь ищет «<» (при условии, что некоторые описания содержат математические символы), то select2 вернет все значения (поскольку все они содержат html-теги), но не будет выделять фактическое значение «меньше», символ в описаниях, потому что они были фактически преобразованы в «& lt;».

Как я могу сделать select2 не искать внутри тегов html?

Answer 1

Хорошо, это, кажется, решение было на самом деле довольно просто: D

Я добавил следующее:

$mySelect.select2({ 
    width: 'resolve', 
    multiple: true, 
    data: suggestionValues, 
    escapeMarkup: function(m) { 
     // Do not escape HTML in the select options text 
     return m; 
    }, 
    matcher: function(term, text) { 
     // Search the term in the formatted text 
     return $("<div/>").html(text).text().toUpperCase().indexOf(term.toUpperCase())>=0; 
    } 
    }); 

Так что теперь, когда пользователь ищет «сильный» они получают только релевантные результаты.

Но теперь есть еще один вопрос:

Теперь, если пользователь ищет «<», то Выбор2 будет выделить «<» внутри сильного тега.

Кажется, что мне нужно также «патч» каким-то образом с результатами поиска фломастер ...

EDIT: Возвращаясь к этому, кажется, что решение для подсветки не так просто .. .

реализация по умолчанию в выбор2, как это:

formatResult: function(result, container, query, escapeMarkup) { 
     var markup=[]; 
     markMatch(result.text, query.term, markup, escapeMarkup); 
     return markup.join(""); 
    }, 
    ....... 

    function markMatch(text, term, markup, escapeMarkup) { 
     var match=text.toUpperCase().indexOf(term.toUpperCase()), 
      tl=term.length; 

     if (match<0) { 
      markup.push(escapeMarkup(text)); 
      return; 
     } 

     markup.push(escapeMarkup(text.substring(0, match))); 
     markup.push("<span class='select2-match'>"); 
     markup.push(escapeMarkup(text.substring(match, match + tl))); 
     markup.push("</span>"); 
     markup.push(escapeMarkup(text.substring(match + tl, text.length))); 
    } 

как-то мне нужно заменить эти две функции, но я не могу найти простое решение для отображения из диапазон символов в отформатированный HTML (поиск срок, чтобы выделить) обратно к исходному HTML (так что я могу добавить класс = < SPAN «ВЫБ.2-матч»>) ...

Если у любого из вас есть лучшие решения, пожалуйста, не стесняйтесь ...