0.0.4 • Published 6 years ago
react-autocomplete-saf v0.0.4
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
})
}}
/>