Live Search

General

You need to use a fetchCallback property to format the data of the API callback, which will match the data structure of the component.

Food List (Enter the search character)

Food List (Direct display)

Show Code

import React from "react";
import LiveSearch from 'funda-ui/LiveSearch';
 
// component styles
import 'funda-ui/LiveSearch/index.css';
 
export default () => {
 
    return (
        <>
            <LiveSearch
                name="app-livesearch-name"
                label="Food List (Enter the search character)"
                options={`
                [
                    {"label": "Option 1","value": "value-1","queryString": "option1"},
                    {"label": "<del style=color:red>deprecate</del>Option 2","value": "value-2","queryString": "option2"},
                    {"label": "Option 3","value": "value-3","queryString": "option3"},
                    {"label": "Option 4","value": "value-4","queryString": "option4", "disabled":true}
                ]  
                `}
            />
 
 
 
            <LiveSearch
                name="app-livesearch-name"
                label="Food List (Direct display)"
                hideIcon
                autoShowOptions
                options={`
                [
                    {"label": "Option 1","listItemLabel":"Option 1 (No: 001)","value": "value-1","queryString": "option1"},
                    {"label": "Option 2","listItemLabel":"<del style=color:red>deprecate</del>Option 2 (No: 002)","value": "value-2","queryString": "option2"},
                    {"label": "Option 3","listItemLabel":"Option 3 (No: 003)","value": "value-3","queryString": "option3"},
                    {"label": "Option 4","listItemLabel":"Option 4 (No: 004)","value": "value-4","queryString": "option4", "disabled":true}
                ]  
                `}
            />
 
        </>
    );
}

No spacing

Show Code

import React from "react";
import LiveSearch from 'funda-ui/LiveSearch';
 
// component styles
import 'funda-ui/LiveSearch/index.css';
 
export default () => {
 
 
    return (
        <>
 
            <LiveSearch
                ...
                wrapperClassName="position-relative"
                ...
            />
 
             <LiveSearch
                ...
                wrapperClassName=""
                ...
            />
 
        </>
    );
}

Asynchronous loading option

You need to use a fetchCallback property to format the data of the API callback, which will match the data structure of the component.

Food List (Enter a,b, or c)

Show Code

import React from "react";
import LiveSearch from 'funda-ui/LiveSearch';
import axios from 'axios';
 
// component styles
import 'funda-ui/LiveSearch/index.css';
 
class DataService {
    
    // `getList()` must be a Promise Object
    async getList(searchStr = '', limit = 0, otherParam = '') {
 
        console.log('searchStr: ', searchStr);
        console.log("limit: ", limit);
        console.log("otherParam: ", otherParam);
 
 
        if ( searchStr === '------') return {
            code: 0,
            message: 'OK',
            data: []
        };
 
 
        return {
            code: 0,
            message: 'OK',
            data: [
                {item_name: 'banana', item_code: 'b', kb_code: 'banana,xiangjiao,xj'},
                {item_name: 'apple', item_code: 'a', kb_code: 'apple,pingguo,pg'},
                {item_name: 'lemon', item_code: 'l', kb_code: 'lemon,ningmeng,nm'},
                {item_name: 'juice', item_code: 'j', kb_code: 'juice,guozhi,gz'},
                {item_name: 'coffee', item_code: 'c', kb_code: 'coffee,kafei,kf'}
            ]
        };
    }
 
 
 
    async getListUseAxios(searchStr = '', limit = 0) {
        let _data = null;
        const res = await axios.get(`https://api`, {
            params: {
                s: searchStr,
                limit: limit
            },
            headers: {
                'Authorization': 'Bearer xxxx-xxxxxxxx-xxxxxxxx'
                'Content-Type': 'application/json'
            }
        }).catch(function (error) {
            console.log(error);
        });
 
        if (res && res.status == 200) _data = res.data;
 
 
        // result
        if (_data === null) {
            return {
                code: 0,
                message: 'OK',
                data: []
            };
        } else {
            return {
                code: 0,
                message: 'OK',
                data: _data
            };
        }
 
    }
 
    	
}
 
export default () => {
 
    return (
        <>
            <LiveSearch
                btnId="app-livesearch-btn"
                name="app-livesearch-name"
                label="Food List (Enter a,b, or c)"
                fetchTrigger={false}
                fetchUpdate={false}
                fetchNoneInfo="No match yet"
                fetchFuncAsync={new DataService}
                fetchFuncMethod="getList"
                fetchFuncMethodParams={['$QUERY_STRING',0]}
                fetchCallback={(res) => {
 
                    const formattedData = res.map((item: any, i: number) => {
                        return {
                            label: item.item_name,
                            listItemLabel: `${item.item_name} (No. ${i})`,
                            value: item.item_code,
                            queryString: item.kb_code,
                            disabled: item.item_code === 'j' ? true : false
                        }
                    }); 
 
                    console.log(formattedData);
                    /*
                    [
                        {
                            "label": "banana",
                            "listItemLabel": "banana (No. 0)",
                            "value": "b",
                            "queryString": "banana,xiangjiao,xj",
                            "disabled": false
                        },
                        {
                            "label": "apple",
                            "listItemLabel": "apple (No. 1)",
                            "value": "a",
                            "queryString": "apple,pingguo,pg",
                            "disabled": false
                        },
                        {
                            "label": "lemon",
                            "listItemLabel": "lemon (No. 2)",
                            "value": "l",
                            "queryString": "lemon,ningmeng,nm",
                            "disabled": false
                        },
                        {
                            "label": "juice",
                            "listItemLabel": "juice (No. 3)",
                            "value": "j",
                            "queryString": "juice,guozhi,gz",
                            "disabled": true
                        },
                        {
                            "label": "coffee",
                            "listItemLabel": "coffee (No. 4)",
                            "value": "c",
                            "queryString": "coffee,kafei,kf",
                            "disabled": false
                        }
                    ]
                    */
 
                    return formattedData;
                }}
                onFetch={(res: any[]) => {
                    console.log('onFetch: ', res);
 
                }}
                onChange={(input: HTMLInputElement, data: any[], selectedData: any) => {
                    console.log('onChange: ', data, selectedData);
 
                    const changeValue = selectedData !== '' ? selectedData.value : input.value;
                    document.querySelector('[name="app-livesearch-name-v"]').value = changeValue;
                    
                }}
                onBlur={(input: HTMLInputElement) => {
                    console.log('onBlur: ', input);
                }}
            />
            <input
                type="text"
                name="app-livesearch-name-v"
            />
        </>
    );
}

Create a non-retrieval `<input>` that can be input and selected

Proper use of autoShowOptions attribute. hideIcon is optional.

Food List (Enter a,b, or c)

Show Code

import React from "react";
import LiveSearch from 'funda-ui/LiveSearch';
 
// component styles
import 'funda-ui/LiveSearch/index.css';
 
class DataService {
    
    // `getList()` must be a Promise Object
    async getList() {
 
  
        return {
            code: 0,
            message: 'OK',
            data: [
                {item_name: 'banana', item_code: 'b', kb_code: 'banana,xiangjiao,xj'},
                {item_name: 'apple', item_code: 'a', kb_code: 'apple,pingguo,pg'},
                {item_name: 'lemon', item_code: 'l', kb_code: 'lemon,ningmeng,nm'},
                {item_name: 'juice', item_code: 'j', kb_code: 'juice,guozhi,gz'},
                {item_name: 'coffee', item_code: 'c', kb_code: 'coffee,kafei,kf'}
            ]
        };
    }
 
}
 
export default () => {
 
    return (
        <>
            <LiveSearch
                btnId="app-livesearch-btn"
                name="app-livesearch-name"
                label="Food List (Enter a,b, or c)"
                hideIcon
                autoShowOptions
                fetchFuncAsync={new DataService}
                fetchFuncMethod="getList"
                fetchFuncMethodParams={[]}
                fetchCallback={(res) => {
 
                    const formattedData = res.map((item: any) => {
                        return {
                            label: item.item_name,
                            value: item.item_code,
                            queryString: item.kb_code
                        }
                    }); 
 
                    return formattedData;
                }}
                onFetch={(res: any[]) => {
                    console.log('onFetch: ', res);
                }}
                onChange={(input: HTMLInputElement, data: any[], selectedData: any) => {
                    console.log('onChange: ',input.value, data, selectedData);
 
                    const changeValue = selectedData !== '' ? selectedData.value : input.value;
                }}
            />
        </>
    );
}

API

Live Search

import LiveSearch from 'funda-ui/LiveSearch';

Property	Type	Default	Description	Required
`ref`	React.ForwardedRef	-	It is the return element of this component.	-
`contentRef`	React.ForwardedRef	-	It exposes the following methods: `contentRef.current.control()` `contentRef.current.clear(() => { console.log('callback') })` `contentRef.current.set('test value', () => { console.log('callback') })` DO NOT USE it in the `onChange` of this component, otherwise it will cause infinite rendering	-
`popupRef`	React.ForwardedRef	-	It exposes the following methods when the component's popup opens or closes: `popupRef.current.close()`	-
`wrapperClassName`	string	`mb-3 position-relative`	The class name of the control wrapper.	-
`controlClassName`	string	`form-control`	The class name of the control.	-
`controlExClassName`	string	-	The extended class name of `controlClassName`.	-
`controlGroupWrapperClassName`	string	`input-group`	The class name of the control group wrapper.	-
`controlGroupTextClassName`	string	`input-group-text`	The class name of the control group text.	-
`exceededSidePosOffset`	number	15	Offset px that exceeds the far right or left side of the screen	-
`options`	JSON Object Literals \| JSON Object	-	Set the default value using JSON string format for menu of options, like this: `[{"label": "Option 1","value": "value-1","queryString": "option1"},{"label": "<del style=color:red>deprecate</del>Option 2","value": "value-2","queryString": "option2"},{"label": "Option 3","value": "value-3","queryString": "option3"},{"label": "Option 4","value": "value-4","queryString": "option4","disabled":true}]` Note: Use API data if database query exists. That is, the attribute `fetchXXXX` When the attribute `hierarchical` is true, you need to use a hierarchical structure to pass data, such as: `[{label:"Top level 1",value:'level-1',queryString:""},{label:"Top level 2",value:'level-2',queryString:""},{label:"Top level 3",value:'level-3',queryString:"",children:[{label:"Sub level 3_1",value:'level-3_1',queryString:""},{label:"Sub level 3_2",value:'level-3_2',queryString:"",children:[{label:"Sub level 3_2_1",value:'level-3_2_1',queryString:""}]},{label:"Sub level 3_3",value:'level-3_3',queryString:""}]}]`	-
`btnId`	string	-	ID of the specified button.	-
`appearance`	string	-	The overlay style of the control. The optional values are: corners: `pill`	-
`isSearchInput`	boolean	false	Whether to enable the search input, it will have an clear button	-
`depth`	number	1055	Set the depth value of the control to control the display of the pop-up layer appear above. Please set it when multiple controls are used at the same time.	-
`value`	string	-	Set a default value for this control	-
`label`	string \| ReactNode	-	It is used to specify a label for an element of a form. Support html tags	-
`name`	string	-	Name is not deprecated when used with form fields.	-
`placeholder`	string	-	Specifies a short hint that describes.	-
`autoComplete`	string	`off`	The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control.	-
`autoCapitalize`	string	`off`	The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input.	-
`spellCheck`	boolean	false	The spellcheck global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors.	-
`units`	string	-	Specify a unit identification string. Such as `em`, `px`, and so on.	-
`iconLeft`	ReactNode	-	Set the left icon of this control	-
`iconRight`	ReactNode	-	Set the right icon of this control	-
`maxLength`	number	-	Defines the maximum string length that the user can enter into it.	-
`minLength`	number	-	Defines the minimum string length that the user can enter into it.	-
`readOnly`	boolean	false	When present, it specifies that this component field is read-only.	-
`disabled`	boolean	false	Whether it is disabled	-
`required`	boolean	false	When present, it specifies that a field must be filled out before submitting the form.	-
`noMatchPopup`	boolean	true	Pop-up window is not displayed when there is no matching content. If true, it is displayed by default.	-
`hideIcon`	boolean	false	Force hiding icons (including icon buttons)	-
`icon`	ReactNode	-	Set the icon of search. Valid when `fetchTrigger` is true.	-
`winWidth`	number \| function	`auto`	Set the container width of options. Such as: `500px` or `() => window.innerWidth/2 + 'px'`	-
`data` You could use key (opens in a new tab) instead of it	any	-	Incoming data, you can set the third parameter of `onFetch`. Changes in the `data` value will cause the component to re-render. It will be used when the value or content does not change when switching routes and needs to re-render the component or get the request. !!!Note: Using `data` and `value` at the same time may cause two different parameter transfers, which will affect the final rendering. Please choose the appropriate usage based on your business. Generally speaking, if the `multiSelect` exists, it is not recommended to use the `data`.	-
`allowSpacingRetrive`	boolean	false	Allow Spaces to return all results. The condition is that the database interface can retrieve whitespace data. By default, using spaces will return no results.	-
`autoShowOptions`	boolean	false	Force display of the option list.	-
`fetchTrigger`	boolean	false	Use buttons to trigger data queries.	-
`fetchNoneInfo`	string	`No match yet`	The text of the data not fetched. Only takes effect when `fetchTrigger` is true.	-
`fetchUpdate`	boolean	false	When the property is true, every time the input changes or the search button is clicked, a data request will be triggered.	-
`fetchFuncAsync`	Constructor	-	A method as a string from the constructor.	-
`fetchFuncMethod`	string	-	When the property is true, every time the input changes or the search button is clicked, a data request will be triggered. The methord must be a Promise Object.	-
`fetchFuncMethodParams`	array	-	The parameter passed by the method, it is an array. Note: the first element is a query string, the second element is the number of queried data (usually a number), and then you can increase the third, or fourth, and more parameters. Such as `['',0]`, `['',99,'string 1','string 2']`, `['',99,'string 1','$QUERY_STRING']` There should be at least one parameter which is the query string. `$QUERY_STRING` identifies the ID of the automatic query, and its value depends on the user input string.	-
`fetchCallback`	function	-	Return value from `fetchCallback` property to format the data of the API callback, which will match the data structure of the component. At the same time it returns the original data, you will use this function and use the `return` keyword to return a new value.	-
`onFetch`	function	-	Call a function when data is successfully fetched. It returns one callback value which is the fetched data (Array)	-
`onClick`	function	-	Call a function when the value of an HTML element is changed. It returns two callback values. The first is the control (HTML Element) The last is the pop-up element(HTML Element)	-
`onChange`	function	-	Call a function when the value of an HTML element is changed. It returns four callback values. The first is the control (HTML Element) The second is the fetched data(Array) The third is the selected data (JSON Object) The last is the pop-up element(HTML Element)	-
`onBlur`	function	-	Call a function when a user leaves an form field. It returns two callback values. The first is the control (HTML Element) The last is the pop-up element(HTML Element)	-
`onKeyboardInput`	function	-	Call a function when the keyboard is pressed. It returns three callback values. The first is the Control Event (KeyboardEvent) The second is the control (HTML Element) The last is the pop-up element(HTML Element)	-
`onPressEnter`	function	-	The callback function that is triggered when Enter key is pressed. It returns two callback values. The first is the control (HTML Element) The last is the pop-up element(HTML Element)	-

It accepts all props which this control support. Such as style, data-*, tabIndex, id, and so on.

JSON Object Literals configuration properties of the options and callback from fetchCallback:

Property	Type	Default	Description	Required
`label`	string	-	Specify the label text for each option. Support html tags.	✅
`listItemLabel`	string	-	Specify the label text for pop-up list items. Support html tags	-
`value`	string	-	Specify the value for each option	✅
`queryString`	string	-	Quick query string, such as Chinese pinyin or English initials	✅
`disabled`	boolean	-	When present, it specifies that an option should be disabled.	-

Create Callback via `fetchCallback`

A successful response returns the details of the callback such as Sample Request Body:

Among them, label, listItemLabel, value, queryString and disabled are attributes used by the system, and other attributes can be added freely.

[
    {
        "label": "banana",
        "listItemLabel": "banana (No. 0)",
        "value": "b",
        "queryString": "banana,xiangjiao,xj",
        "disabled": false
    },
    {
        "label": "apple",
        "listItemLabel": "apple (No. 1)",
        "value": "a",
        "queryString": "apple,pingguo,pg",
        "disabled": false
    },
    ...
]

Installation

Live Search

General

No spacing

Asynchronous loading option

Create a non-retrieval <input> that can be input and selected

API

Live Search

Create Callback via fetchCallback

Create a non-retrieval `<input>` that can be input and selected

Create Callback via `fetchCallback`