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

用户944513

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

这是我的代码https://codesandbox.io/s/affectate-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

所以我当前的代码是这样工作的,没有高亮 在此处输入图片说明

迈克尔

您应该将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>
  );
};

使用复选框和子标题编辑选择

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在DataGridView中突出显示搜索文本?

搜索后如何在Vim中编辑突出显示的文本

如何在特定列的 DataGridView 中突出显示搜索文本?

如何在javascript中突出显示搜索文本记录?

如何在CSS中自动为文本突出显示动画?

如何在HTML文本中搜索特定文本并用颜色突出显示搜索字符串

jQuery自动完成突出显示表格列表中的文本

如何在搜索过滤器中突出显示搜索到的文本?

自动完成时突出显示/加粗文本

如何在 Rider 中更改自动完成突出显示颜色

在setValue之后如何在角垫自动完成中突出显示选项值?

如何在乳胶中突出显示文本

如何在qpdfview中突出显示文本?

如何在Calibre中突出显示文本?

如何在 Flask 中突出显示文本

如何在自动建议结果列表中突出显示搜索关键字 React JS

如何在vim编辑器中突出显示搜索到的文本?

如何在DataGridView中突出显示搜索阿拉伯文本?

如何从 sensenet 中的内容搜索中获取突出显示的文本

如何在ionic 2中完成自动完成(搜索栏)

如何在自动完成中显示链接

如何在 AUI 中显示有限实体:自动完成搜索建议

如何在JQUERY中过滤搜索输入以显示正确的自动完成功能?

如何在Material ui自动完成的输入文本字段中显示所选值?

如何在HTML中的文本框上显示自动完成的jQuery UI

如何在VIM中禁用搜索模式语法突出显示

如何在PDFKit中突出显示搜索结果-iOS

如何在tmux中突出显示搜索结果?

Bootstrap typhead.js不会在自动完成的文本框中突出显示元素