我正在尝试制作一个自定义自动完成功能,我可以做到,但我无法突出显示匹配的文本
这是我的代码https://codesandbox.io/s/affectate-colden-7embr?file=/src/index.js
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
您应该将currentInput
toName.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] 删除。
我来说两句