Quick start
<Combobox items={ [ 'abc', 'abd', 'bcd', 'cde', 'bde' ] }
onSelect={ item => console.log( item ) }
/>
More
import React from 'react';
import ReactDOM from 'react-dom';
import { Combobox } from '@ohxyz/combobox';
import '@ohxyz/combobox/style/default.css';
const persons = [
{ height: 175, name: 'Andrea' },
{ height: 167, name: 'Anthony', sex: 'Male' },
{ name: 'Annie', sex: 'Female', height: 180 },
{ name: 'Campbell', height: 175 },
{ sex: 'Female', name: 'Bennie', height: 175 },
{ name: 'Cameron', height: 173, sex: 'Male' },
{ name: 'Benjamin', sex: 'Male', height: 167 },
{ name: 'Anna', sex: 'Female', height: 169 },
{ name: 'Benson', sex: 'Male' }
];
ReactDOM.render(
<Combobox
items={ persons }
fields={ [ 'name', 'height' ] }
indexOfFieldsToSort={ 1 }
id="my-combobox"
inputId="my-combobox__input-id"
inputName="my-combobox__input-name"
placeholder="Search people..."
strikes={ 2 }
shouldRenderCount={ true }
shouldRenderListOnFocus={ false }
shouldRenderIcon={ true }
onIconClick= { combobox => { console.log( combobox ); combobox.toggleAllItems(); } }
onSelect={ ( item, combobox ) => { console.log( item, combobox ); } }
onChange= { combobox => console.log( combobox ) }
onFocus={ combobox => console.log( combobox ) }
onBlur={ combobox => console.log( combobox ) }
/>,
document.getElementById( 'container' )
);
Render customized item by inheritance
class MyCombobox extends Combobox {
renderItem( person ) {
return (
<div className="combobox__person">
<div>{ person.name }</div>
{ person.sex && <div>{ { Male: 'Man', Female: 'Woman' }[ person.sex ] }</div> }
{ person.height && <div>Height: { person.height }CM</div> }
</div>
);
}
}
ReactDOM.render(
<MyCombobox items={ persons } />,
document.getElementById( 'container' )
);