react-autocomplete-saf

AutoComplete Component

a simple Autocomplete component for react and Material-ui , npm install react-autocomplete-saf

Data Array

const arr=[
  {
    Name:"Doc",
    id:0
  },
  {
    Name:"Zip", 
    id:1
  },
  {
    Name:"Other",
    id:2
  }
]

loadDocument

    loadDocument(query){
      return new Promise(resolve=>resolve(_.filter(arr,a=>a.Name.match(new RegExp(query,"i")))))
    }

AutoComplete

<AutoComplete
          //to enable offline search
          //searchLocal={"Name"}
          default={arr[document].Name}
          //to disable Textfield
          // disable={true}
          width={"250px"}
          //Label
          label="Document"
          //unique property in Suggestions array
          valueKey="id"
          //Text format when an suggest get selected
          valueText={(suggest) => (suggest) ? (suggest.Name) : ""}
          //optional key 
          key={"Type"}
          //cause of using {whithStyles} we cant call AutoComplete public methods so i did this onRef. 
          onRef={x => this.AutoComplete = x}
          //render item
          displayItem={(item) => <span>{item.Name} <i>{item.id}</i></span>}
          //load array of docs (Promise) every onChange event 
          load={this.loadDocument}

          //when an Item get clicked (chose)
          //{suggestId} comes from suggestSelected[valueKey]
          select={(suggestId) => {
            this.setState({
              document: suggestId
            })
          }}
        />