Searchable Select

Searchable Select #

A component where you can perform both search and selection operations and customize your server-side requests.

import { PSearchableSelect } from 'pearkit';

Basic #

Here is an example of how it is done. Here, we send a request to https://dummyjson.com/products, update our state named products and send it to the component. Here, the loader prop is triggered when the component status is true or the search status is true.

Search & Select Product


    const [selected, setSelected] = useState({});
    const [products, setProducts] = useState([]);
    const [isPending, setIsPending] = useState(false);

    const loaderHandler = async (searchTerm) => {
        setIsPending(true);
        let url = 'https://dummyjson.com/products';
        if (searchTerm) {
            url += `/search?q=${searchTerm}`
        }
        const response = await axios.get(url);
        setProducts(response.data.products);
        setIsPending(false);
    }
    
    <PSearchableSelect
        selected={selected}
        selector={"title"}
        onChange={setSelected}
        placeholder={"Search & Select Product"}
        loader={loaderHandler}
        values={products}
        isPending={isPending}
    />

Customizable Item Component #

Here, when you write a separate component and assign it to the itemComponent property as a prop, you change the items in the lists and the selected item in the selection section. It was developed to give you a customizable structure.

Search & Select Product


    const [selected, setSelected] = useState({});
    const [products, setProducts] = useState([]);
    const [isPending, setIsPending] = useState(false);

    const loaderHandler = async (searchTerm) => {
        setIsPending(true);
        let url = 'https://dummyjson.com/products';
        if (searchTerm) {
            url += `/search?q=${searchTerm}`
        }
        const response = await axios.get(url);
        setProducts(response.data.products);
        setIsPending(false);
    }
    
    const CustomItemComponent = (props) => {
        return (
            <div className="flex gap-2 items-center">
                <img src={props.images[0]} alt={props.title} className="size-6 w-auto"/>
                <span>{props.title}</span>
            </div>
        )
    }
    
    <PSearchableSelect
        selected={selected}
        selector={"title"}
        onChange={setSelected}
        placeholder={"Search & Select Product"}
        loader={loaderHandler}
        values={products}
        isPending={isPending}
        itemComponent={<CustomItemComponent />}
    />

Disabled #

You can manage this situation by writing the disabled property directly or by sending a boolean value.

Search & Select Product

<PSearchableSelect disabled />

Focus Open #

Tab key is focus the element and open automatically and focus search again.

Search & Select Product

<PSearchableSelect focusOpen />

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the alert component.

Name	Type	Default	Description
selected	object	{}	Selected object item of the component
placeholder	string	Search & Select Record	Placeholder of the component
selector	string	null	It is used as a selective index in the data stack.
onChange	function	void	Trigger when select item
loader	function	void	Trigger when is status or search status changed
color	TwColor \| All tailwind color names	lime	Color of the component
values	Object[]	[]	The chunk of data that must be sent after the request.
itemComponent	React.ReactNode	null	Customizable item and selected area component
focusOpen	boolean \| true \| false	false	Trigger open component on focus status
isPending	boolean \| true \| false	false	Loading status of the component content area
disabled	boolean \| true \| false	false	Control status of the component

Toast

Datatable (Beta)