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

Question

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

更新：新问题

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

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

Input 1: b

Drop-down menu: Bulbasaur

Textbox after selecting menu item: Bulbasaur,

Input 2: c

Drop-down menu: Charmander

Textbox after selecting menu item: Bulbasaur, Charmander,

我想要的

Input 2: c

Drop-down menu: 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>

已解决：问题 1

更新：非常感谢您的帮助！！

我想要的

无论输入查询是大写还是小写，下拉菜单都会显示高亮显示的大写和小写结果：

Input: b

Drop-down menu: Bulbasaur

现实

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

Input: b

Drop-down menu: bulbasaur

Textbox after selecting menu item: 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" />

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

jQuery UI Autocomplete highlight multiple inputs: doesn't work for uppercase?

html

javascript

jquery

jquery-ui-autocomplete

更新：新问题

我想要的

我的代码

相关CSS

已解决：问题 1

我想要的

现实

我试过的