Antd中Select组件搜索高亮

最新推荐文章于 2024-05-30 20:38:53 发布

p小醋包q

最新推荐文章于 2024-05-30 20:38:53 发布

阅读量3.3k

点赞数 3

文章标签： typescript reactjs 前端

本文链接：https://blog.csdn.net/primadonna_w/article/details/116106765

版权

本文介绍了在Antd的Select组件中实现搜索高亮的三种方法。从默认状态到搜索模式，详细展示了每种方法的优缺点。第一种方法在每次输入时都会高亮所有匹配项，第二种方法只能高亮第一个匹配项，而第三种方法则是全面的解决方案，完美地实现了关键字高亮效果。

摘要由CSDN通过智能技术生成

Antd中Select组件搜索高亮
需求：默认时的状态：

点击时出现搜索框可以搜索：

搜索时关键字高亮：
在这里插入图片描述

实现方法一：

import React from 'react'
import {
    Select } from 'antd'
import {
   
import React, {
   
    useEffect, useState, useRef,
} from 'react'
import {
   Select} from 'antd'

const SelectSearch = (props) => {
   
    const {
    optionArr, currentValue='' } = props
    const {
    Option } = Select
export interface IProps {
   
    optionArr: Array<{
   
        customerName: string,
        animalName: string,
        customerPhone: string,
        id: number | string
    }>;
    currentValue?: string
}

const SelectSearch = (props: IProps) => {
   
    const {
   optionArr, currentValue = ''} = props
    const {
   Option} = Select
    const [initialData, updateData] = useState(optionArr)
    const [searchValue, setSearchValue] = useState(currentValue)

    const onChange = (value) => {
   

    }

    const onSearch = (value) => {
   
        setSearchValue(value)
    }

	 const SelectSearch = (props) => {
   
    	return (
        <Select
            showSearch
            style={
   {
    width: 200 }}
            style={
   {
   width: 200}}
            onChange={
   onChange}
            onSearch={
   onSearch}
            defaultValue={
   0}
            filterOption={
   (input, option) =>
                option.children.toLowerCase().indexOf(