React material ui searcable select

Material ui en büyük eksiklerinden biri selectlerde arama olmamasıdır. Up uzun listede aradığınızı scroll ederek bulmak can hayli can sıkıcı. 5.versiyonunda autocomplete componenti eklemişler bu sorunu çözmek için, kullanımı pek kolay değil, uzun uğraşlar sonucu çalışan bir onchange methodunu paylaşmak isterim;

Mui projede kurulu değilse consola;

yarn add @dccs/react-autocomplete-mui

veya

npm i @dccs/react-autocomplete-mui

Komutuyla ilgili paketi ekliyoruz. Kurulumda sorun yaşanırsa package.json dosyasında “dependencies” altına    “@dccs/react-autocomplete-mui”: “0.10.4” ekleyip, npm install ya da yarn install diyerek tüm package.json da ekli olan tüm hookları kurabilirsiniz. versiyonu değişebilir, şu an son versiyonu “0.10.4”

autocomplete componentimizi ekliyoruz;

  <Autocomplete
                                    onChange={onChange("title")}
                                    ref={ref0}
                                    name="title"
                                    id="title"
                                    barcode={giftData.barcode}
                                    value={giftData.title}
                                    disablePortal
                                    options={productL.map(p => p.title)}
                                    renderInput={(params) => <TextField  {...params} label="Yayın Adı" />}
                                />

onChage fonksiyonu;

 const onChange = (name) => async (e, values) => {
            setGiftData({
                ...giftData,
                title: values
            });
        }

options seçilen değeri values ile ilgili state doldulur.