jQuery UI 自动完成突出显示多个输入：对大写字母不起作用？

Question

我遇到了一个任务，要求我们在 jQuery 的 UI 自动完成小部件中突出显示多个匹配的子字符串。

更新：新问题

现在我有第二个问题：当文本框为空并且我输入一个字母时，下拉菜单会显示所有正确的突出显示和项目。

但是当我在第一个查询后加一个逗号时，第二个搜索显示了正确的菜单项，但它没有显示任何亮点：

输入 1：b

下拉菜单：Bulbasaur

选择菜单项后的文本框：Bulbasaur,

输入 2：c

下拉菜单：Charmander

选择菜单项后的文本框：Bulbasaur, Charmander,

我想要什么

输入 2：c

下拉菜单：Charmander

任何帮助将不胜感激！

我的代码

类别也是要求的一部分。

<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

下拉菜单：Bulbasaur

现实

我的下拉菜单显示匹配的大写字母和小写字母，但是在选择菜单项后，它正确显示了大写字母：

输入：b

下拉菜单：bulbasaur

选择菜单项后的文本框：Bulbasaur,

我尝试过的

如果我删除 var result = new RegExp(term, "gi"); 中的 i 标记，菜单会以大写字母显示结果，但不会突出显示。

讲义和实验没有提及或建议如何使用小写查询同时突出显示大小写。

我尝试在网上查找，但要么解决方案不起作用，要么太复杂以至于我无法理解（我只用 JavaScript 编码几个星期）。这里 99% 的代码都是直接从各种来源复制而来的。

我只是了解RegExp() 做了什么，但我不知道去哪里实现我想要的。

感谢任何指导！

Answer 1

您可以在replace 中传递Regexp 变量并在函数回调中访问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" />