Блог

Главная - Вопросы по программированию - Автозаполнение пользовательского интерфейса JQUERY, изменение цвета последнего слова

Автозаполнение пользовательского интерфейса JQUERY, изменение цвета последнего слова

#jquery #jquery-ui #colors #autocomplete

Вопрос:

я хочу изменить цвет текста только на моем последнем слове для каждой строки. Я использую функцию автозаполнения пользовательского интерфейса Jquery, поэтому я использую элементы li с классом «ui-menu-item»

  $('#tag'   i).autocomplete({
      source: allMyProducts
 });

Я не понимаю, как это сделать, может ли кто-нибудь мне помочь?

EDIT1: Это мои строки: введите описание изображения здесь

Например, строка: «это тест», я хочу изменить цвет так: «это тест» (тест красного цвета)

Комментарии:

1. это не очень понятно, не могли бы вы показать свой пример кода js и html и уточнить, что вы подразумеваете под моим последним словом для каждой строки.

2. я обновил сообщение

Ответ №1:

Рассмотрим следующий код.

 $(function() {
  var availableTags = [
    "Catalizzatore Aqua-Pur-Haerter 82220 MDIVECA000467",
    "Catalizzatore CATAL. X MDIVECA000782",
    "Fondo acqua AQUATECH FONDO TIX HBS9A04",
    "Fondo acqua AQUATECH FONDO TIX HQ TT9/90 MDIVEFH000402"
  ];
  $("#tags").autocomplete({
    source: availableTags
  }).autocomplete("instance")._renderItem = function(ul, item) {
    var words = item.label.split(" ");
    var last = words.pop();
    return $("<li>")
      .append("<div>"   words.join(" ")   " <span class='red'>"   last   "<span></div>")
      .appendTo(ul);
  };
}); 
 .red {
  color: red;
} 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Это создается на основе следующего примера: https://jqueryui.com/autocomplete/#custom-data

Быстрый способ разбить предложение — превратить строку в массив. Таким образом, мы можем разбить предложение на слова, разделив его, используя " " . Затем мы можем удалить последнее слово и соединить остальные слова обратно в предложение. Я обертываю последнее слово <span> тегом с классом, чтобы мы могли легко стилизовать текст.

Рекомендации:

Метки: ,