Element-React Input 輸入框

通過鼠標(biāo)或鍵盤輸入字符

基礎(chǔ)用法

render() {
  return <Input placeholder="請(qǐng)輸入內(nèi)容" />
}

禁用狀態(tài)

通過 disabled 屬性指定是否禁用 input 組件

render() {
  return <Input disabled placeholder="請(qǐng)輸入內(nèi)容" />
}

帶 icon 的輸入框

帶有圖標(biāo)標(biāo)記輸入類型

可以通過 icon 屬性在 input 組件尾部增加顯示圖標(biāo)。

handleIconClick(ev) {
}
render() {
  return (
    <Input
      icon="time"
      placeholder="請(qǐng)選擇日期"
      onIconClick={this.handleIconClick.bind(this)}
    />
  )
}

文本域

可調(diào)整大小，用于輸入多行文本信息

通過將 type 屬性的值指定為 textarea。

render() {
  return (
    <Input
      type="textarea"
      autosize={{ minRows: 2, maxRows: 4}}
      placeholder="請(qǐng)輸入內(nèi)容"
    />
  )
}

可自適應(yīng)文本高度的文本域

通過設(shè)置 autosize 屬性可以使得文本域的高度能夠根據(jù)文本內(nèi)容自動(dòng)進(jìn)行調(diào)整，并且 autosize 還可以設(shè)定為一個(gè)對(duì)象，指定最小行數(shù)和最大行數(shù)。

render() {
  return (
    <div>
      <Input
        type="textarea"
        autosize={true}
        placeholder="請(qǐng)輸入內(nèi)容"
      />
      <div style={{ margin: '20px 0' }}></div>
      <Input
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4}}
        placeholder="請(qǐng)輸入內(nèi)容"
      />
    </div>
  )
}

復(fù)合型輸入框

可前置或后置元素，一般為標(biāo)簽或按鈕

可通過 prepend 和 append 來指定在 input 中前置或者后置內(nèi)容。

render() {
  return (
    <div>
      <Input placeholder="請(qǐng)輸入內(nèi)容" prepend="Http://" />
      <Input placeholder="請(qǐng)輸入內(nèi)容" append=".com" />
      <Input placeholder="請(qǐng)輸入內(nèi)容" prepend={
        <Select value="">
          {
            ['餐廳名', '訂單號(hào)', '用戶電話'].map((item, index) => <Select.Option key={index} label={item} value={index} />)
          }
        </Select>
      } append={<Button type="primary" icon="search">搜索</Button>} />
    </div>
  )
}

尺寸

可通過 size 屬性指定輸入框的尺寸，除了默認(rèn)的大小外，還提供了 large、small 和 mini 三種尺寸。

render() {
  return (
    <div className="inline-input">
      <Input placeholder="請(qǐng)輸入內(nèi)容" size="large" />
      <Input placeholder="請(qǐng)輸入內(nèi)容" />
      <Input placeholder="請(qǐng)輸入內(nèi)容" size="small" />
      <Input placeholder="請(qǐng)輸入內(nèi)容" size="mini" />
    </div>
  )
}

帶輸入建議

根據(jù)輸入內(nèi)容提供對(duì)應(yīng)的輸入建議, 依賴autoComplete

Autocomplete 是一個(gè)可帶輸入建議的輸入框組件，

constructor(props) {
  super(props);


  this.state = {
    restaurants: [
      { "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
      { "value": "新旺角茶餐廳", "address": "上海市普陀區(qū)真北路988號(hào)創(chuàng)邑金沙谷6號(hào)樓113" },
      { "value": "瀧千家(天山西路店)", "address": "天山西路438號(hào)" },
      { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)1幢18號(hào)樓一層商鋪18-101" },
      { "value": "貢茶", "address": "上海市長(zhǎng)寧區(qū)金鐘路633號(hào)" },
      { "value": "豪大大香雞排超級(jí)奶爸", "address": "上海市嘉定區(qū)曹安公路曹安路1685號(hào)" },
      { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區(qū)同普路1435號(hào)" },
      { "value": "十二瀧町", "address": "上海市北翟路1444弄81號(hào)B幢-107" },
      { "value": "星移濃縮咖啡", "address": "上海市嘉定區(qū)新郁路817號(hào)" },
      { "value": "阿姨奶茶/豪大大", "address": "嘉定區(qū)曹安路1611號(hào)" },
      { "value": "新麥甜四季甜品炸雞", "address": "嘉定區(qū)曹安公路2383弄55號(hào)" },
      { "value": "Monica摩托主題咖啡店", "address": "嘉定區(qū)江橋鎮(zhèn)曹安公路2409號(hào)1F，2383弄62號(hào)1F" },
      { "value": "浮生若茶（凌空soho店）", "address": "上海長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層" },
      { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長(zhǎng)寧區(qū)天山西路119號(hào)" },
      { "value": "CoCo都可(北新涇店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路" },
      { "value": "快樂檸檬（神州智慧店）", "address": "上海市長(zhǎng)寧區(qū)天山西路567號(hào)1層R117號(hào)店鋪" },
      { "value": "Merci Paul cafe", "address": "上海市普陀區(qū)光復(fù)西路丹巴路28弄6號(hào)樓819" },
      { "value": "貓山王（西郊百聯(lián)店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路88號(hào)第一層G05-F01-1-306" },
      { "value": "槍會(huì)山", "address": "上海市普陀區(qū)棕櫚路" },
      { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號(hào)" },
      { "value": "錢記", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "壹杯加", "address": "上海市長(zhǎng)寧區(qū)通協(xié)路" },
      { "value": "唦哇嘀咖", "address": "上海市長(zhǎng)寧區(qū)新涇鎮(zhèn)金鐘路999號(hào)2幢（B幢）第01層第1-02A單元" },
      { "value": "愛茜茜里(西郊百聯(lián))", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)1305室" },
      { "value": "愛茜茜里(近鐵廣場(chǎng))", "address": "上海市普陀區(qū)真北路818號(hào)近鐵城市廣場(chǎng)北區(qū)地下二樓N-B2-O2-C商鋪" },
      { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區(qū)金沙江路2239號(hào)金沙和美廣場(chǎng)B1-10-6" },
      { "value": "開心麗果（繽谷店）", "address": "上海市長(zhǎng)寧區(qū)威寧路天山路341號(hào)" },
      { "value": "超級(jí)雞車（豐莊路店）", "address": "上海市嘉定區(qū)豐莊路240號(hào)" },
      { "value": "妙生活果園（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "香宜度麻辣香鍋", "address": "長(zhǎng)寧區(qū)淞虹路148號(hào)" },
      { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區(qū)老真北路160號(hào)" },
      { "value": "港式小鋪", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
      { "value": "北京餃子館", "address": "長(zhǎng)寧區(qū)北新涇街道天山西路490-1號(hào)" },
      { "value": "飯典*新簡(jiǎn)餐（凌空SOHO店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層9-83室" },
      { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號(hào)地下一層甲部" },
      { "value": "動(dòng)力雞車", "address": "長(zhǎng)寧區(qū)仙霞西路299弄3號(hào)101B" },
      { "value": "瀏陽(yáng)蒸菜", "address": "天山西路430號(hào)" },
      { "value": "四海游龍（天山西路店）", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "櫻花食堂（凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "壹分米客家傳統(tǒng)調(diào)制米粉(天山店)", "address": "天山西路428號(hào)" },
      { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長(zhǎng)寧區(qū)協(xié)和路福泉路255弄57-73號(hào)" },
      { "value": "速記黃燜雞米飯", "address": "上海市長(zhǎng)寧區(qū)北新涇街道金鐘路180號(hào)1層01號(hào)攤位" },
      { "value": "紅辣椒麻辣燙", "address": "上海市長(zhǎng)寧區(qū)天山西路492號(hào)" },
      { "value": "(小楊生煎)西郊百聯(lián)餐廳", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)百聯(lián)2樓" },
      { "value": "陽(yáng)陽(yáng)麻辣燙", "address": "天山西路389號(hào)" },
      { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區(qū)金沙江路1699號(hào)鑫樂惠美食廣場(chǎng)A13" }
    ],
    value1: '',
    value2: ''
  }
}


querySearch(queryString, cb) {
  const { restaurants } = this.state;
  const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
  cb(results);
}


createFilter(queryString) {
  return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
}


handleSelect(item) {


}


render() {
  return (
    <Layout.Row className="inline-input border-grid">
      <Layout.Col span="12" className="tac">
        <div className="text">激活即列出輸入建議</div>
        <AutoComplete
          placeholder="請(qǐng)輸入內(nèi)容"
          value={this.state.value1}
          onFocus={e=>console.log(e, 'onFocus')}
          onBlur={e=>console.log(e, 'onblur')}
          fetchSuggestions={this.querySearch.bind(this)}
          onSelect={this.handleSelect.bind(this)}
        ></AutoComplete>
      </Layout.Col>
      <Layout.Col span="12" className="tac">
        <div className="text">輸入后匹配輸入建議</div>
        <AutoComplete
          placeholder="請(qǐng)輸入內(nèi)容"
          value={this.state.value2}
          fetchSuggestions={this.querySearch.bind(this)}
          onSelect={this.handleSelect.bind(this)}
          triggerOnFocus={false}
        ></AutoComplete>
      </Layout.Col>
    </Layout.Row>
  )
}

自定義模板

可自定義輸入建議的顯示，依賴 AutoComplete

Autocomplete 是一個(gè)可帶輸入建議的輸入框組件，

constructor(props) {
  super(props);


  this.state = {
    restaurants: [
      { "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
      { "value": "新旺角茶餐廳", "address": "上海市普陀區(qū)真北路988號(hào)創(chuàng)邑金沙谷6號(hào)樓113" },
      { "value": "瀧千家(天山西路店)", "address": "天山西路438號(hào)" },
      { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)1幢18號(hào)樓一層商鋪18-101" },
      { "value": "貢茶", "address": "上海市長(zhǎng)寧區(qū)金鐘路633號(hào)" },
      { "value": "豪大大香雞排超級(jí)奶爸", "address": "上海市嘉定區(qū)曹安公路曹安路1685號(hào)" },
      { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區(qū)同普路1435號(hào)" },
      { "value": "十二瀧町", "address": "上海市北翟路1444弄81號(hào)B幢-107" },
      { "value": "星移濃縮咖啡", "address": "上海市嘉定區(qū)新郁路817號(hào)" },
      { "value": "阿姨奶茶/豪大大", "address": "嘉定區(qū)曹安路1611號(hào)" },
      { "value": "新麥甜四季甜品炸雞", "address": "嘉定區(qū)曹安公路2383弄55號(hào)" },
      { "value": "Monica摩托主題咖啡店", "address": "嘉定區(qū)江橋鎮(zhèn)曹安公路2409號(hào)1F，2383弄62號(hào)1F" },
      { "value": "浮生若茶（凌空soho店）", "address": "上海長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層" },
      { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長(zhǎng)寧區(qū)天山西路119號(hào)" },
      { "value": "CoCo都可(北新涇店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路" },
      { "value": "快樂檸檬（神州智慧店）", "address": "上海市長(zhǎng)寧區(qū)天山西路567號(hào)1層R117號(hào)店鋪" },
      { "value": "Merci Paul cafe", "address": "上海市普陀區(qū)光復(fù)西路丹巴路28弄6號(hào)樓819" },
      { "value": "貓山王（西郊百聯(lián)店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路88號(hào)第一層G05-F01-1-306" },
      { "value": "槍會(huì)山", "address": "上海市普陀區(qū)棕櫚路" },
      { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號(hào)" },
      { "value": "錢記", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "壹杯加", "address": "上海市長(zhǎng)寧區(qū)通協(xié)路" },
      { "value": "唦哇嘀咖", "address": "上海市長(zhǎng)寧區(qū)新涇鎮(zhèn)金鐘路999號(hào)2幢（B幢）第01層第1-02A單元" },
      { "value": "愛茜茜里(西郊百聯(lián))", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)1305室" },
      { "value": "愛茜茜里(近鐵廣場(chǎng))", "address": "上海市普陀區(qū)真北路818號(hào)近鐵城市廣場(chǎng)北區(qū)地下二樓N-B2-O2-C商鋪" },
      { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區(qū)金沙江路2239號(hào)金沙和美廣場(chǎng)B1-10-6" },
      { "value": "開心麗果（繽谷店）", "address": "上海市長(zhǎng)寧區(qū)威寧路天山路341號(hào)" },
      { "value": "超級(jí)雞車（豐莊路店）", "address": "上海市嘉定區(qū)豐莊路240號(hào)" },
      { "value": "妙生活果園（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "香宜度麻辣香鍋", "address": "長(zhǎng)寧區(qū)淞虹路148號(hào)" },
      { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區(qū)老真北路160號(hào)" },
      { "value": "港式小鋪", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
      { "value": "北京餃子館", "address": "長(zhǎng)寧區(qū)北新涇街道天山西路490-1號(hào)" },
      { "value": "飯典*新簡(jiǎn)餐（凌空SOHO店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層9-83室" },
      { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號(hào)地下一層甲部" },
      { "value": "動(dòng)力雞車", "address": "長(zhǎng)寧區(qū)仙霞西路299弄3號(hào)101B" },
      { "value": "瀏陽(yáng)蒸菜", "address": "天山西路430號(hào)" },
      { "value": "四海游龍（天山西路店）", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "櫻花食堂（凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "壹分米客家傳統(tǒng)調(diào)制米粉(天山店)", "address": "天山西路428號(hào)" },
      { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長(zhǎng)寧區(qū)協(xié)和路福泉路255弄57-73號(hào)" },
      { "value": "速記黃燜雞米飯", "address": "上海市長(zhǎng)寧區(qū)北新涇街道金鐘路180號(hào)1層01號(hào)攤位" },
      { "value": "紅辣椒麻辣燙", "address": "上海市長(zhǎng)寧區(qū)天山西路492號(hào)" },
      { "value": "(小楊生煎)西郊百聯(lián)餐廳", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)百聯(lián)2樓" },
      { "value": "陽(yáng)陽(yáng)麻辣燙", "address": "天山西路389號(hào)" },
      { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區(qū)金沙江路1699號(hào)鑫樂惠美食廣場(chǎng)A13" }
    ],
    value: ''
  }
}


querySearch(queryString, cb) {
  const { restaurants } = this.state;
  const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
  cb(results);
}


createFilter(queryString) {
  return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
}


handleSelect(item) {


}


render() {
  return (
    <AutoComplete
      className="my-autocomplete"
      icon="edit"
      placeholder="請(qǐng)輸入內(nèi)容"
      value={this.state.value}
      fetchSuggestions={this.querySearch.bind(this)}
      customItem={this.props.customItem}
      onSelect={this.handleSelect.bind(this)}
    ></AutoComplete>
  )
}

遠(yuǎn)程搜索

從服務(wù)端搜索數(shù)據(jù)，依賴 AutoComplete

Autocomplete 是一個(gè)可帶輸入建議的輸入框組件，

constructor(props) {
  super(props);


  this.state = {
    restaurants: [
      { "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
      { "value": "新旺角茶餐廳", "address": "上海市普陀區(qū)真北路988號(hào)創(chuàng)邑金沙谷6號(hào)樓113" },
      { "value": "瀧千家(天山西路店)", "address": "天山西路438號(hào)" },
      { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)1幢18號(hào)樓一層商鋪18-101" },
      { "value": "貢茶", "address": "上海市長(zhǎng)寧區(qū)金鐘路633號(hào)" },
      { "value": "豪大大香雞排超級(jí)奶爸", "address": "上海市嘉定區(qū)曹安公路曹安路1685號(hào)" },
      { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區(qū)同普路1435號(hào)" },
      { "value": "十二瀧町", "address": "上海市北翟路1444弄81號(hào)B幢-107" },
      { "value": "星移濃縮咖啡", "address": "上海市嘉定區(qū)新郁路817號(hào)" },
      { "value": "阿姨奶茶/豪大大", "address": "嘉定區(qū)曹安路1611號(hào)" },
      { "value": "新麥甜四季甜品炸雞", "address": "嘉定區(qū)曹安公路2383弄55號(hào)" },
      { "value": "Monica摩托主題咖啡店", "address": "嘉定區(qū)江橋鎮(zhèn)曹安公路2409號(hào)1F，2383弄62號(hào)1F" },
      { "value": "浮生若茶（凌空soho店）", "address": "上海長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層" },
      { "value": "NONO JUICE  鮮榨果汁", "address": "上海市長(zhǎng)寧區(qū)天山西路119號(hào)" },
      { "value": "CoCo都可(北新涇店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路" },
      { "value": "快樂檸檬（神州智慧店）", "address": "上海市長(zhǎng)寧區(qū)天山西路567號(hào)1層R117號(hào)店鋪" },
      { "value": "Merci Paul cafe", "address": "上海市普陀區(qū)光復(fù)西路丹巴路28弄6號(hào)樓819" },
      { "value": "貓山王（西郊百聯(lián)店）", "address": "上海市長(zhǎng)寧區(qū)仙霞西路88號(hào)第一層G05-F01-1-306" },
      { "value": "槍會(huì)山", "address": "上海市普陀區(qū)棕櫚路" },
      { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號(hào)" },
      { "value": "錢記", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "壹杯加", "address": "上海市長(zhǎng)寧區(qū)通協(xié)路" },
      { "value": "唦哇嘀咖", "address": "上海市長(zhǎng)寧區(qū)新涇鎮(zhèn)金鐘路999號(hào)2幢（B幢）第01層第1-02A單元" },
      { "value": "愛茜茜里(西郊百聯(lián))", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)1305室" },
      { "value": "愛茜茜里(近鐵廣場(chǎng))", "address": "上海市普陀區(qū)真北路818號(hào)近鐵城市廣場(chǎng)北區(qū)地下二樓N-B2-O2-C商鋪" },
      { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區(qū)金沙江路2239號(hào)金沙和美廣場(chǎng)B1-10-6" },
      { "value": "開心麗果（繽谷店）", "address": "上海市長(zhǎng)寧區(qū)威寧路天山路341號(hào)" },
      { "value": "超級(jí)雞車（豐莊路店）", "address": "上海市嘉定區(qū)豐莊路240號(hào)" },
      { "value": "妙生活果園（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
      { "value": "香宜度麻辣香鍋", "address": "長(zhǎng)寧區(qū)淞虹路148號(hào)" },
      { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區(qū)老真北路160號(hào)" },
      { "value": "港式小鋪", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
      { "value": "北京餃子館", "address": "長(zhǎng)寧區(qū)北新涇街道天山西路490-1號(hào)" },
      { "value": "飯典*新簡(jiǎn)餐（凌空SOHO店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)9號(hào)樓地下一層9-83室" },
      { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號(hào)地下一層甲部" },
      { "value": "動(dòng)力雞車", "address": "長(zhǎng)寧區(qū)仙霞西路299弄3號(hào)101B" },
      { "value": "瀏陽(yáng)蒸菜", "address": "天山西路430號(hào)" },
      { "value": "四海游龍（天山西路店）", "address": "上海市長(zhǎng)寧區(qū)天山西路" },
      { "value": "櫻花食堂（凌空店）", "address": "上海市長(zhǎng)寧區(qū)金鐘路968號(hào)15樓15-105室" },
      { "value": "壹分米客家傳統(tǒng)調(diào)制米粉(天山店)", "address": "天山西路428號(hào)" },
      { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長(zhǎng)寧區(qū)協(xié)和路福泉路255弄57-73號(hào)" },
      { "value": "速記黃燜雞米飯", "address": "上海市長(zhǎng)寧區(qū)北新涇街道金鐘路180號(hào)1層01號(hào)攤位" },
      { "value": "紅辣椒麻辣燙", "address": "上海市長(zhǎng)寧區(qū)天山西路492號(hào)" },
      { "value": "(小楊生煎)西郊百聯(lián)餐廳", "address": "長(zhǎng)寧區(qū)仙霞西路88號(hào)百聯(lián)2樓" },
      { "value": "陽(yáng)陽(yáng)麻辣燙", "address": "天山西路389號(hào)" },
      { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區(qū)金沙江路1699號(hào)鑫樂惠美食廣場(chǎng)A13" }
    ],
    value: ''
  }
}


querySearchAsync(queryString, cb) {
  const { restaurants } = this.state;
  const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;


  clearTimeout(this.timeout);


  this.timeout = setTimeout(() => {
    cb(results);
  }, 3000 * Math.random());
}


createFilter(queryString) {
  return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
}


handleSelect(item) {


}


render() {
  return (
    <AutoComplete
      placeholder="請(qǐng)輸入內(nèi)容"
      value={this.state.value}
      fetchSuggestions={this.querySearchAsync.bind(this)}
      onSelect={this.handleSelect.bind(this)}
    ></AutoComplete>
  )
}

Input Attributes

Autocomplete Attributes

Autocomplete Events