AntDesign下，Select内嵌Menu标签，做一个多选下拉框，既可以搜索，还可以选择下拉项

话不多说，直接上效果和代码
效果图一：

效果图二：

renderAddStyleOption = (item: any) => {
   const { value } = this.props;
   const { currentSelectedOptionIds, currentStyleId } = this.state;
   const styleSettings = value?.styleSettings;

   const newStyleSettings = styleSettings && styleSettings.length ? styleSettings : [];
   if (item) {
       const hasSearchKeyword = find([...item.allOptions, ...item.options], {
           name: item.optionKeyword,
       });
       return (
           <div
               className="specs-settings-popover"
               onBlur={() => {
                   this.setState({
                       currentStyleId: undefined,
                   });
               }}
           >
               <div
                   onMouseDown={(e) => {
                       e.preventDefault();
                       return false;
                   }}
               >
                   <Select
                       style={{ width: '300px' }}
                       placeholder={language.getText('selectPlease')}
                       mode="multiple"
                       autoClearSearchValue
                       showSearch
                       filterOption={false}
                       onChange={(selectedValues: any) => {
                           this.setState({
                               currentSelectedOptionIds: selectedValues,
                           });
                       }}
                       value={currentSelectedOptionIds}
                       onSearch={(keyword: string) => {
                           this.onSearch(item.id, newStyleSettings, keyword);
                       }}
                       onFocus={() => {
                           this.onSearch(item.id, newStyleSettings);
                       }}
                       open={currentStyleId === item.id}
                       onDropdownVisibleChange={() => {
                           this.setState({
                               currentStyleId: item.id,
                           });
                       }}
                       dropdownRender={() => (
                           <Menu
                               className="select-menu"
                               onClick={async (e: any) => {
                                   this.selectedStyleOption(e.key, item.id);
                               }}
                           >
                               {!hasSearchKeyword && item.optionKeyword && (
                                   <Menu.Item
                                       key={item.optionKeyword}
                                       className="add-menu-item"
                                   >
                                       <Icon type="plus" style={{ marginRight: '5px' }} />
                                       {item.optionKeyword}
                                   </Menu.Item>
                               )}
                               {item.options &&
                                   item.options.map((attribute: any) => {
                                       return (
                                           <Menu.Item
                                               key={attribute.id}
                                               className="select-menu-item"
                                           >
                                               {attribute.name}
                                               {currentSelectedOptionIds.includes(
                                                   attribute.id + ''
                                               ) && (
                                                   <Icon
                                                       type="check"
                                                       style={{ marginLeft: '5px' }}
                                                   />
                                               )}
                                           </Menu.Item>
                                       );
                                   })}
                           </Menu>
                       )}
                   >
                       {item.options &&
                           item.options.map((attribute: any) => {
                               return (
                                   <Select.Option
                                       key={attribute.id}
                                       value={String(attribute.id)}
                                   >
                                       {attribute.name}
                                   </Select.Option>
                               );
                           })}
                   </Select>
               </div>
               <Button
                   className="popover-btn"
                   type="default"
                   onClick={() => {
                       this.toggleOptionPopover(item.id);
                   }}
               >
                   {language.getText('common.cancel')}
               </Button>
               <Button
                   className="popover-btn"
                   type="primary"
                   onClick={() => {
                       this.addStyleOption(item.id);
                   }}
               >
                   {language.getText('common.add')}
               </Button>
           </div>
       );
   } else {
       return null;
   }
};

直接说重点，时间问题，不单纯出简单代码为大家说明了

1.关于下拉项事件的加载，可以通过onSearch和onFocus
获取你们的数据源，其中onSearch会返回name也就是select输入框的关键字，可以与后端接口请求获取

2.为什么使用Menu？是发现在Select输入关键字，下拉项出现“新增关键字”选项时，即使不点也会默认选中第一项，而“新增关键字”还未加入数据库，id获取不到，因此使用了Menu来控制到底是不是用户手动点的，
（也有人想要这种简便操作，就是点击“新增关键字”，移除select也仍然加入数据库这种交互的话，那直接用select无需嵌套Menu可做到。我的需求是必须是用户手动点击下拉项才可以添加到数据库，避免一些伪操作数据的产生，大家自行判断～）

3.使用Menu大家应该也会遇到其他的卡点，可以移步到我上次写的一个博客，里面有详细写遇到的问题～
https://blog.csdn.net/weixin_43517190/article/details/147008156?spm=1001.2014.3001.5501