Как при поиске изменить цвет у части слова?

Question

[Daniil]

Добрый день. Есть инпут. Мы вводим текст, например "Москва" и есть блок абсолютный со списком найденых похожих городов, то есть, будет в блоке "Москва".

И тебе вопрос, если я введу часть слова "Москва", то есть "Мо", например, в блоке абсолютном со списком эта часть слова должна получить другой цвет.

Инпут - "Мо"
Абсолютный блок - "Москва"

или

Инпут - "Ба"
Абсолютный блок - "Деспасар Бали"

Помогите пожалуйста.

Comments

[tyzberd]

Разбирайтесь как работают плагины
https://habr.com/post/74713/
https://goodies.pixabay.com/jquery/auto-complete/d...

Answer 1

[davidnum95]

Вот по правильному

Comments

[Daniil]

И вам спасибо большое!

[Антон Спирин]

По-хорошему в autocomplete надо игнорировать регистр.

Answer 2

[0xD34F]

.highlighted {
  color: red;
  font-weight: bold;
  font-size: 1.5em;
}

class App extends React.Component {
  state = {
    items: [ 'aaa', 'aa1', 'ab1', 'zzz', '00!', 'lorem ipsum dolor...' ],
    search: '',
  }

  render() {
    const { items, search } = this.state;
    const regex = RegExp(search, 'g');
    const replacement = '<span class="highlighted">$&</span>';

    return (
      <div>
        <input value={search} onChange={e => this.setState({ search: e.target.value })} />
        {search &&
        <ul>
          {items.filter(n => n.includes(search)).map(n =>
            <li dangerouslySetInnerHTML={{ __html: n.replace(regex, replacement) }} />
          )}
        </ul>}
      </div>
    );
  }
}

Comments

[Daniil]

Спасибо, уже второй раз. На основе данного уже буду делать под себя.