jQuery UI Автозаполнение выделения нескольких входов: не работает в верхнем регистре?

Question

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

ОБНОВЛЕНИЕ: Новая проблема

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

Но когда я ставлю запятую после первого запроса, второй поиск показывает правильные пункты меню, но НЕ показываетлюбые основные моменты:

Ввод 1: b

Раскрывающееся меню: B ul b asaur

Текстовое поле после выбора пункта меню: Bulbasaur,

Ввод 2: c

Раскрывающееся меню: Charmander

Текстовое поле после выбора пункта меню: Бульбасавр, ​​Charmander,

Что я хочу

Ввод 2: c

Раскрывающееся меню: C harmander

AnВаша помощь будет принята!

Мой код

Категории также являются частью требований.

<script>
    var pokemonList = [ ... ];

    function widgetConstr()
    {
        this._super();
    };

    function renderPokemons(ul, item)
    {
        terms = this.term.split(',');
        term = this.element.val().trim();

        var result = new RegExp(term, "gi");
        var newTerm = item.label
                        .replace(result, "<span class='match-character'>" + term + "</span>");

        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + newTerm + "</a>")
                .appendTo(ul);
    };

    function renderPokemonList(ul, items)
    {
        var that = this;
        currentCategory = "";

        $.each(
            items, function(index, item)
            {
                var li;
                if (item.category != currentCategory)
                {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }

                li = that._renderItemData(ul, item);

                if (item.category)
                    li.attr("aria-label", item.category + " : " + item.label);
            }
        );
    };

    $.widget(
        "custom.PokemonSearch", $.ui.autocomplete,
        {
            _create: widgetConstr,
            _renderItem: renderPokemons,
            _renderMenu: renderPokemonList
        }
    );

    function split(val)
    {
        return val.split(/,\s*/);
    };

    function extractLast(term)
    {
        return split(term).pop();
    };

    $("search").on("keydown", function(event)
        {
            if (event.keyCode == $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active)
                event.preventDefault();
        }
    );

    function onDocumentReady()
    {
        $("#search").PokemonSearch(
            {
                delay: 0,
                max: 10,
                scroll: true,
                source: function(request, response)
                {
                    response($.ui.autocomplete.filter(
                        pokemonList, extractLast(request.term)
                    ));
                },

                focus: function()
                {
                    return false;
                },

                select: function(event, ui)
                {
                    var terms = split(this.value);
                    terms.pop();
                    terms.push(ui.item.value);
                    terms.push("");
                    this.value = terms.join(", ");

                    return false;
                }
            }
        )
    };

    $(document).ready(onDocumentReady);

</script>

Соответствующий CSS

.match-character {
    font-weight: bold;
    font-style: italic;
    color: blue;
}

---

РЕШЕНО: Проблема 1

Обновление: Большое спасибо за помощь !!

Что я хочу

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

Ввод: b

Раскрывающееся меню: B ul b asaur

Реальность

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

Ввод: b

Раскрывающееся меню: b ul b asaur

Текстовое поле после выбора пункта меню: Bulbasaur,

Что я пробовал

Если я уберу тег i в var result = new RegExp(term, "gi");, появится менюрезультаты с заглавными буквами, но они не отображаются как выделенные.

В лекционных заметках и лабораторных работах не упоминалось и не предлагалось делать подсветку как в верхнем, так и в нижнем регистре с помощью запроса в нижнем регистре. Я пытался смотреть онлайн, но либо решения не работают, либо они слишком сложны для понимания (я только кодирую в JavaScript несколько недель). 99% кода здесь скопированы непосредственно из различных источников.

Я только что понял, что делает RegExp(), но я понятия не имею, куда идти, чтобы достичь того, чего я хочу.

Любое руководство приветствуется!

Answer 1

Вы можете передать переменную Regexp в replace и получить доступ к match в обратном вызове функции:

var result = new RegExp(term, "gi");
var newTerm = item.label
    .replace(result, function(match) {
      return "<span class='match-character'>" + match + "</span>"
});

var pokemonList = ['Bulbasaur'];
fetch("https://pokeapi.co/api/v2/pokemon/?limit=50").then(a => a.json().then(b => {
  pokemonList = b.results.map(({
    name,
    ...obj
  }) => name.charAt(0).toUpperCase() + name.slice(1))
}));

function widgetConstr() {
  this._super();
};

function renderPokemons(ul, item) {
  terms = this.term.split(',');
  term = this.element.val().trim();

  var result = new RegExp(term, "gi");
  var newTerm = item.label
    .replace(result, function(match) {
      return "<span class='match-character'>" + match + "</span>"
    });

  return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + newTerm + "</a>")
    .appendTo(ul);
};

function renderPokemonList(ul, items) {
  var that = this;
  currentCategory = "";

  $.each(
    items,
    function(index, item) {
      var li;
      if (item.category != currentCategory) {
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
        currentCategory = item.category;
      }

      li = that._renderItemData(ul, item);

      if (item.category)
        li.attr("aria-label", item.category + " : " + item.label);
    }
  );
};

$.widget(
  "custom.PokemonSearch", $.ui.autocomplete, {
    _create: widgetConstr,
    _renderItem: renderPokemons,
    _renderMenu: renderPokemonList
  }
);

function split(val) {
  return val.split(/,\s*/);
};

function extractLast(term) {
  return split(term).pop();
};

$("search").on("keydown", function(event) {
  if (event.keyCode == $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active)
    event.preventDefault();
});

function onDocumentReady() {
  $("#search").PokemonSearch({
    delay: 0,
    max: 10,
    scroll: true,
    source: function(request, response) {
      response($.ui.autocomplete.filter(
        pokemonList, extractLast(request.term)
      ));
    },

    focus: function() {
      return false;
    },

    select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");

      return false;
    }
  })
};

$(document).ready(onDocumentReady);

.match-character {
  font-weight: bold;
  font-style: italic;
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="search" />

---

ОБНОВЛЕНИЕ для разделенных запятыми берут последнюю из связки:

term = terms[terms.length -1].trim();

var pokemonList = ['Bulbasaur'];
fetch("https://pokeapi.co/api/v2/pokemon/?limit=50").then(a => a.json().then(b => {
  pokemonList = b.results.map(({
    name,
    ...obj
  }) => name.charAt(0).toUpperCase() + name.slice(1))
}));

function widgetConstr() {
  this._super();
};

function renderPokemons(ul, item) {
  terms = this.term.split(',');
  term = terms[terms.length -1].trim();

  var result = new RegExp(term, "gi");
  var newTerm = item.label
    .replace(result, function(match) {
      return "<span class='match-character'>" + match + "</span>"
    });

  return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + newTerm + "</a>")
    .appendTo(ul);
};

function renderPokemonList(ul, items) {
  var that = this;
  currentCategory = "";

  $.each(
    items,
    function(index, item) {
      var li;
      if (item.category != currentCategory) {
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
        currentCategory = item.category;
      }

      li = that._renderItemData(ul, item);

      if (item.category)
        li.attr("aria-label", item.category + " : " + item.label);
    }
  );
};

$.widget(
  "custom.PokemonSearch", $.ui.autocomplete, {
    _create: widgetConstr,
    _renderItem: renderPokemons,
    _renderMenu: renderPokemonList
  }
);

function split(val) {
  return val.split(/,\s*/);
};

function extractLast(term) {
  return split(term).pop();
};

$("search").on("keydown", function(event) {
  if (event.keyCode == $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active)
    event.preventDefault();
});

function onDocumentReady() {
  $("#search").PokemonSearch({
    delay: 0,
    max: 10,
    scroll: true,
    source: function(request, response) {
      response($.ui.autocomplete.filter(
        pokemonList, extractLast(request.term)
      ));
    },

    focus: function() {
      return false;
    },

    select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");

      return false;
    }
  })
};

$(document).ready(onDocumentReady);

.match-character {
  font-weight: bold;
  font-style: italic;
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="search" />