Search Input Box

This guide will help you integrate and configure the Search Input Box function, which adds a search input field with live dropdown suggestions.

📦 Basic Usage

<div class="searchInputDropdown">
    <input type="text" id="searchInput" placeholder="Search..." autocomplete="off" />
    <div id="searchDropdown"></div>
</div>
<script >
    searchDropdown('searchInput', 'searchDropdown', {
        url: 'http://localhost:3000/api/search'
    });
</script >

searchInput is the ID of the text input field.
searchDropdown is the ID of the div where suggestions will appear.
The third parameter is an options object.

⚠️ The element IDs provided must match the IDs used in the searchDropdown function call.

⚙️ Options

You can customize the behavior of the search dropdown using the options object:

Option	Type	Description
`url`	String	(Required) The API endpoint for performing a `GET` search query.
`redirecturl`	String	(Optional) If specified, redirects to this URL after a suggestion is clicked. Use `{ID}` as a placeholder for the selected item's ID.
`hidden`	String	(Optional) The ID of a hidden input where the selected item's ID will be stored. Useful for form submissions.

💡 Notes

- The API should return a list of results in JSON format, with each object containing an id and a label

Suggest an edit

Review this page

faxes

8 months ago - updated (8 months ago)

1 recommend this page