项目作者: wizardone

项目描述 :
Autocomplete input field, using the fetch api
高级语言: JavaScript
项目地址: git://github.com/wizardone/fetch-autocomplete.git
创建时间: 2017-01-05T15:38:19Z
项目社区:https://github.com/wizardone/fetch-autocomplete

开源协议:

下载


react-autocomplete

Build Status

Autocomplete field written in React. A couple of points:

  • It uses Json to send data and it expects a json data to be returned
  • It uses the Fetch Api.
  • It is configurable.

To configure the FetchAutoComplete Component you can pass the following
properties:

  1. import { FetchAutoComplete } from 'fetch-autocomplete'
  2. <FetchAutoComplete inputClass='autocomplete-field' resultsClass='autocomplete-results'
  3. mainHolderClass='autocomplete' defaultSearchText='Search...'
  4. defaultKeyPresses={3} fetchUrl='http://localhost:8888/data' fetchMethod='POST'
  5. fetchMode='cors'
  6. ></FetchAutoComplete>

The options that you definitely want to configure are:
fetchUrl => url endpoint
fetchMode => ‘cors’ or ‘no-cors’, depending on how you use the
autocomplete field

The request format is:

  1. {
  2. "search": "value"
  3. }

The response format needs to look like this:

  1. {
  2. "data": [
  3. {"identifier": "title", "value": "mysearch", "url": "http://dummy.com"},
  4. {"identifier": "title", "value": "searchme", "url": "http://test.com"}
  5. ]
  6. }

Pretty much data is an array of the search results. Currently only the value
and url are used to display the results. Future versions will use more options ;)