---
title: 6.搜索 
order: 6

---

##### 通过设置showSearch为true，可以开启组件的搜索功能, 通过filter属性自定义搜索逻辑。


```jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwCascader } from '@ywfe/yw-design';
class App extends Component {
 constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch("https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json")
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(e => console.log(e));
  }
  handleChange(value, data, extra) {
    console.log(value, data, extra);
  }
  filter(searchValue, path) {
    return (
      searchValue === "" ||
      path
        .map(({ value, label }) => `${value}${label}`)
        .join("")
        .match(searchValue)
    );
  }
  render() {
    return (
      <YwCascader
        showSearch
        filter={this.filter}
        dataSource={this.state.data}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<App />, mountNode);
```