我一直在尝试在 React 中开发搜索建议。搜索建议将在用户键入时显示。
您可以在链接上找到代码 - https://codesandbox.io/s/heuristic-shaw-rqp2k?file=/src/Autocomplete.js
我想要实现的是，出现的建议必须有用户输入的粗体部分。
示例 - 当用户在输入字段中输入“ pa ”时，我们得到两个建议——Papaya 和 Paw Paw
因此，建议应显示为Pa paya 和Pa w Paw。
我一直在尝试使用替换方法通过执行以下操作来实现这一点 -
let optionName = optionName.replace(userInput,'<b>'+userInput+'</b>')
这段代码不起作用，这是代码和框链接上的第 66 行。
任何其他不使用替换方法的解决方案也是受欢迎的。
如果您需要更多信息，请告诉我。
下面的代码解决了。请检查。
<li className={className} key={optionName} onClick={onClick}>
{_getStyledSuggestion(optionName)}
</li>
const _getStyledSuggestion = (suggestion) => {
if(!suggestion.toLowerCase().startsWith(userInput)) {
return <span>{suggestion}</span>;
}
const userInputLength = userInput.length;
return(
<span>
<span className="bold-span">{suggestion.substring(0, userInputLength)}</span>
{suggestion.substring(userInputLength)}
</span>
);
}
CSS：
.bold-span {
font-weight: 700;
}
链接：https : //codesandbox.io/s/angry-sea-97k4w?file=/src/ Autocomplete.js: 1495-1898
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句