How can I disable search and make autoComplete just display the API result set

[adamtheapiguy]

Hey guys,

I have REST API that searches and returns back the results and I use the autoComplete to just display these results 'as is'. I don't need to search them again.

Is there a version of autoComplete or a way to modify current code to just display whatever it receives from the REST API call?

Cheers, adam

[LuViKu]

Hey I encountered the same problem. I think according to the documentation you could implement a custom search engine. For me setting the search engine to "loose" solved my problem.

EDIT: It turns out building a custom search engine is easier than I thought. function searchEngine(query, record) { return record;} This directly returns all the results you receive from your REST API call. The only this is, that the parts of the result matching the query string are not highlighted anymore.

[adamtheapiguy]

Thank you @LuViKu

[squareclouds]

@LuViKu can you please give an example of the whole config or setup?

[LuViKu]

@squareclouds sure here is my implementation:

`// custom search engine function searchEngine(query, record) { return record; }

    const autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        placeHolder: "Search for your stuff",
        searchEngine: searchEngine, // Strict, loose or custom search engine
        data: {
            src: async (query) => {
                try {
                    // Fetch Data from external Source
                    const source = await fetch(`your api endpoint`);
                    const data = await source.json();
                    return data;
                } catch (error) {
                    return error;
                }
            },
            // Gets the value for the specified key from your api's response
            keys: ["my-api-value"]
        },
        resultItem: {
            highlight: true, //Does not work with custom search engine. You'll need to implement this yourself if necessary
            element: (item, data) => {
                // Here you can modify the div containing your data (item) and your data (data).
                }
            },
        },
        events: {
            input: {
                selection: (event) => {
                    // I use this for accessing the data of the result selected by the user.
                }
            }
        }
    });`

Please let me know if anything is unclear.

[squareclouds]

@LuViKu perfect! this worked like a charm :) you had one mistake though, after resultItem you close the whole object, you have one bracket too much

resultItem: {
            highlight: true, //Does not work with custom search engine. You'll need to implement this yourself if necessary
            element: (item, data) => {
                // Here you can modify the div containing your data (item) and your data (data).
                }
            },
        }, //  <<<-------- must be removed