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

Question

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

更新：新问题

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

但是，当我在第一个查询之后输入逗号时，第二个搜索显示正确的菜单项，但没有显示任何突出显示：

  

输入1： b

     

下拉菜单： B ul b asaur

     

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

     

输入2： c

     

下拉菜单：香菜

     

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

我想要的

  

输入2： c

     

下拉菜单： C harmander

任何帮助将不胜感激！

我的代码

类别也是要求的一部分。

<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" />