javascript - 如何在自动完成中突出显示搜索文本？

Question

我正在尝试制作一个自定义自动完成功能，我可以做到，但我无法突出显示匹配的文本

这是我的代码 https://codesandbox.io/s/affectionate-colden-7embr?file=/src/index.js

看看我什么时候输入john john是蓝色的

matchItems = (items, regexp) => {
    let match = false;
    items.forEach(item => {
      if (item.search(regexp) > -1) {
        match = true;
      }
    });
    return match;
  };

  filterUsers = (users, regexp) => {
    const filteredUsers = users.filter(
      user =>
        user.name.search(regexp) > -1 ||
        user.id.search(regexp) > -1 ||
        this.matchItems(user.items, regexp) ||
        user.address.search(regexp) > -1 ||
        user.pincode.search(regexp) > -1
    );
    return filteredUsers;
  };

  filterByKeyword = e => {
    const keyword = e.target.value;
    this.setState({ currentInput: keyword });
    if (keyword) {
      const regexp = new RegExp(`${keyword}`, 'i');
      this.setState({ users: this.filterUsers(users, regexp) });
    } else {
      this.setState({ users });
    }
  };

so my code filter works correctly but I am not able to hightlist the text

所以我当前的代码是这样工作的，没有突出显示

标签： javascriptreactjs

Answer 1

您应该传递currentInputtoName.js作为道具来填充匹配的单词。尝试这个：

import React from "react";
import PropTypes from "prop-types";

const Name = ({ name, highlight }) => {
  if (!highlight.trim()) {
    return <span>{name}</span>;
  }
  const escapeRegExp = (str = "") =>
    str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
  const regex = new RegExp(`(${escapeRegExp(highlight)})`, "gi");
  const parts = name.split(regex);
  console.log(parts.filter(part => part));
  return (
    <span>
      {parts
        .filter(part => part)
        .map((part, i) =>
          regex.test(part) ? (
            <mark key={i}>{part}</mark>
          ) : (
            <span key={i}>{part}</span>
          )
        )}
    </span>
  );
};