搜索下拉框（不要后面的箭头）AutoComplete&Search

最新推荐文章于 2023-06-14 10:23:40 发布

原创最新推荐文章于 2023-06-14 10:23:40 发布 · 728 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用React实现带有搜索功能的下拉选择框组件，包括自定义渲染选项、事件监听及数据源映射等核心功能，适合前端开发者深入理解并实践。

类前面写一个函数：

function renderOption(item) {//下拉框数据
  return (
    <Option key={item.descCode} >
      <span>{item.descName}</span>&nbsp;
      <span>{item.descCode}</span>
    </Option>
  );
}

onSearch = (a) => {
  console.log(a);
}

onSelect = (a) => {
    console.log(a);
 }

  //搜索下拉框
 <div className="global-search-wrapper" style={{width:470}} >
          <AutoComplete
            className="global-search"
            size="default"
            dataSource={searchDictList!=undefined? 
            searchDictList.map(renderOption):''}
            style={{ width: 300 }}
            onSelect={this.onSelect}
            onSearch={this.onSearch}
            placeholder="请输入项目名称"
            optionLabelProp="text"
            dropdownMenuStyle={{width:'100%'}}
            dropdownMatchSelectWidth={false}
          >
            <Search
              onSearch={this.onSearch}
              style={{ width: 300 }}
            />
          </AutoComplete>
        </div>