react-select为全向搜索框

时间:2016-09-29 16:21:49

标签: react-select

我有一个rails后端对我的联系人信息进行全文搜索,包括他们的电子邮件,电话号码等。

  class ContactServiceController < ApplicationController
    def search
      query = User.search_for_contacts(params[:query])
      @contacts = query.results
      render :index
    end      
  end

它返回一个只包含名字和姓氏的联系人数组。

[{first: 'John', last:'doe'}, {first: 'jane', last: 'doe'}]

使用react-select,我希望如果用户输入john@doe.com,返回的记录将显示在下拉菜单中,我知道我不太可能突出显示该列表中的正确项目,但展示它真好。有可能吗?

这是我的反应选择组件

    <Select.Async
        name="contact-select"
        value={id}
        loadOptions={getOptions || this.getOptions}
        onChange={this.onChange}
        allowCreate={true}
    />

    const prepareContactsData = contacts => 
      map(contacts, (contact) => 
        (
          {
            label: contact.full,
            value: contact.id,
          }
        )
    )


    const getOptions = (query, callback) => {
      if(!query.length){
        return callback(null, [])
      }
      return contactServiceApi
              .search({query})
              .then( data => {
                callback(null, 
                  {
                    options: prepareContactsData(data.contacts)
                  }
                )
              })
    }
谢谢你!

0 个答案:

没有答案