Стиль Отдельный шрифт, соответствующий входному значению

Я работаю над проектом интеллектуального текста. Имеется панель поиска и значок ul с отфильтрованным списком элементов на основе введенного пользователем значения.

Как мне стилизовать шрифты bold в li, соответствующие входному значению? И это не влияет на порядок каждого символа в li?

Допустим, пользователь вводит "ap", "Apple" и "Grape" и появляется с "ap", выделенным жирным шрифтом в suggestions.

const fruit = ["Apple", "Banana", "Grape", ]
let results = [];

function search(str) {
  results = [
    ...fruit.filter((el) => el.toLowerCase().includes(str.toLowerCase())),
  ];

  return results;
}

function searchHandler(e) {
  results = [];
  suggestions.textContent = "";

  showSuggestions(search(input.value), input.value);
}

function showSuggestions(results, inputVal) {
  for (let el of results) {
    const li = document.createElement("li");
    const span = document.createElement("span");

    span.className = "has-suggestions";

    // for each character that matches, style it bold
    li.textContent = el;

    li.append(span);
    suggestions.append(li);
    console.info(li.innerHTML);
  }
}

ul .has-suggestions {
  font-weight: bold;
}

<div class = "search-container">
  <input type = "text" name = "fruit" id = "fruit" placeholder = "Search fruit 🍎" />
  <div class = "suggestions">
    <ul></ul>
  </div>
</div>

В вашем коде нет обработчика событий для обработки любого текста, введенного в элемент <input>, и вы назначаете свойства объекту suggestions, нигде его не объявляя. Я думаю, что могу понять, о чем вы спрашиваете, но чтобы мы могли ответить на вопрос, вам нужно поделиться достаточным количеством вашего кода, чтобы мы могли просто отредактировать его для решения проблемы, а не потенциально переписывать его. Возможно, я просто устал и плохо читаю код.

— 11.04.2024 11:04

javascript html css

11.04.2024 02:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

const fruit = ["Apple", "Banana", "Grape",]
let results = [];

function search(str) {
  results = [
    ...fruit.filter((el) => el.toLowerCase().includes(str.toLowerCase())),
  ];

  return results;
}

function searchHandler(e) {
  results = [];
  let ul = document.querySelector('.suggestions > ul');
  ul.textContent = "";
  let input = document.getElementById('fruit');
  showSuggestions(search(input.value), input.value);
}

function showSuggestions(results, inputVal) {
  let ul = document.querySelector('.suggestions > ul');
  let regex = new RegExp(inputVal, 'i');
  for (let el of results) {
    const li = document.createElement("li");
    li.innerHTML = el.replace(regex,`<span class = "has-suggestions">$&</span>`);
    // $& is the matched substring to the regex
    ul.append(li);
    //console.info(li.innerHTML);
  }
}

ul .has-suggestions {
  font-weight: bold;
}

<div class = "search-container">
    <input
      type = "text"
      name = "fruit"
      id = "fruit"
      placeholder = "Search fruit 🍎"
      oninput = "searchHandler(event)"
    />
    <div class = "suggestions">
        <ul></ul>
    </div>
</div>

Что делать, если необходимо учитывать регистр? Как я могу этого добиться? Теперь, когда я начинаю вводить текст в строку поиска, все совпадения отображаются в нижнем регистре. Как найти совпадение, стилизовать соответствующие шрифты и сохранить верхний регистр в элементе списка?

— 12.04.2024 05:10

@Kwok, вы можете удалить 'i' в регулярном выражении, чтобы оно учитывало регистр, и добавить .toLowerCase() после el.replace() (так оно станет el.replace().toLowerCase()), чтобы сделать совпадения строчными. Я отредактирую ответ, если вам нужно объяснение.

— 12.04.2024 06:27

11.04.2024 06:28