package Ġsamples . autocomplete Ċ Ċ import Ġan td . autocomplete . DataSource ItemType Ċ import Ġan td . autocomplete . auto Complete Ċ import Ġkotlin ext . js . js Ċ import Ġreact .* Ċ import Ġstyled . css Ċ import Ġstyled . styled Div Ċ Ċ private Ġval Ġhandle Select Ġ= Ġ{ Ġvalue : ĠAny , Ġ_: ĠAny Ġ-> ĊĠĠĠ Ġconsole . log (" on Select ", Ġvalue ) Ċ } Ċ Ċ external Ġinterface ĠBasic Complete State Ġ: ĠState Ġ{ ĊĠĠĠ Ġvar ĠdataSource : ĠArray < DataSource ItemType > Ċ } Ċ Ċ class ĠBasic Complete Ġ: ĠR Component < Props , ĠBasic Complete State >() Ġ{ ĊĠĠĠ Ġprivate Ġval Ġhandle Search Ġ= Ġfun ( value : ĠString ) Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠdataSource Ġ= Ġif Ġ( value . isEmpty ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġempty Array () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠarrayOf ( value , Ġvalue Ġ+ Ġvalue , Ġvalue Ġ+ Ġvalue Ġ+ Ġvalue ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠBasic Complete State . init () Ġ{ ĊĠĠĠĠĠĠĠ ĠdataSource Ġ= Ġempty Array () ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġauto Complete Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdataSource Ġ= Ġstate . dataSource ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġjs Ġ{ Ġwidth Ġ= Ġ 2 0 0 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonSelect Ġ= Ġhandle Select ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Search Ġ= Ġhandle Search ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġplaceholder Ġ= Ġ" input Ġhere " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . basic Complete () Ġ= Ġchild ( Basic Complete :: class ) Ġ{} Ċ Ċ fun ĠR Builder . basic () Ġ{ ĊĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠ Ġcss Ġ{ Ġ+ Auto Complete Styles . basic Ġ} ĊĠĠĠĠĠĠĠ Ġbasic Complete () ĊĠĠĠ Ġ} Ċ } Ċ