美文网首页
antdesign-select搜索功能

antdesign-select搜索功能

作者: JancyCC | 来源:发表于2020-06-11 10:00 被阅读0次

filterOption
import { Select } from 'antd';
const { Option } = Select;

function onChange(value) {
console.log(selected ${value});
}

<Select
size="default"
showSearch //使单选模式可搜索
defaultValue="请选择"
suffixIcon={<Icon type="caret-down" />}
style={{ fontSize: 13, boxShadow: 'none',width:"115px" }}
dropdownClassName="dropdownWrapper"
onChange={this.onChangeOption.bind(this)}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

<Option value="default">请选择</Option>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>


官方文档提供demo:filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
},结果报错,打断点查到少了一层,正确代码如下:
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
希望可以帮助遇到同样问题的伙伴。

官方文档https://ant.design/components/select-cn/

相关文章

  • antdesign-select搜索功能

    filterOptionimport { Select } from 'antd';const { Option ...

  • 搜索功能

    测试点: 1.默认条件搜索,结果正确 2.选择可选条件搜索,结果正确 3.选择输入条件搜索,结果正确 4.组合可选...

  • 搜索功能 分类搜索

    ``` defindexifparams[:category].blank? @products = Prod...

  • Flutter收藏库——简单的搜索功能

    最近在做项目时需要用到搜索框搜索功能,百度后记之以温习。 实现搜索功能的SearchDelegate 实现搜索功能...

  • Django开发教程(五)

    十六、实现商品搜索功能 16.1商品搜索功能的分析: 16.2全文搜索框架haystack和搜索引擎whoosh的...

  • tableView搜索功能

    框架:https://github.com/honeycao/HCSortAndSearchDemogithub里...

  • 语音搜索功能

    首先,我们需要自定义一个textField 用于绑定语音搜索的功能。自定义键盘就没做了,只是简单的在键盘上方添加了...

  • 搜索功能异常

    第一张图片太多搜不出来,第二涨就能搜索出来 去掉这个勾,就可以了

  • 图片搜索功能

    想让某些软件出个图片搜索功能,跟现在的智能看图识物不同,也不完全是淘宝那种按照图片购物的功能,我主要是希望一整张图...

  • 搜索业务模块的设计

    一、搜索功能 1.搜索功能需要考虑的问题 1.1搜索范围 a.哪些内容可以被用户找到。一般会通过搜索框...

网友评论

      本文标题:antdesign-select搜索功能

      本文链接:https://www.haomeiwen.com/subject/zkvvtktx.html