A reusable JavaScript function to create a searchable input field that can be used in HTML forms. The input field allows users to search and select an item from a list, with the selected item's ID being submitted as part of the form.

Features

• Supports both local data and server-based searches.
• Tracks the loading state and errors during server-based searches.
• Integrates seamlessly into HTML forms, with the selected item submitted as a form field.
• Provides options to customize the hidden input's name attribute for form submissions.
• Includes a "Clear" button to reset the input.

Installation

Install the package via NPM:

npm install searchable-input-field

Usage Include the package in your project:

// Import the package
const { createSearchField } = require('searchable-input-field');

// Use the function
const container = document.getElementById('searchFieldContainer');
createSearchField(container, {
  items: [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' },
    { id: 4, name: 'Grape' },
    { id: 5, name: 'Pineapple' }
  ],
  inputName: 'productId' // The hidden input name for form submission
});

Configuration Options

The createSearchField function accepts two parameters:

• container: The container element where the search field will be added.
• options: An object containing configuration options:
  • items: An array of objects to search through. Each object should have an id and name property.
  • url: A URL to fetch items from. The search term is appended as a query parameter (optional).
  • inputName: The name attribute for the hidden input that stores the selected item's ID (default is 'selectedItem').

Server-Based Search Example

To use a server-based search, provide a URL:

createSearchField(container, {
  url: 'https://example.com/api/items',
  inputName: 'productId'
});

The function will make a GET request to the specified URL with the query parameter ?query=SEARCH_TERM.

Accessing the Selected Item, Loading State, and Error State

The function returns an object with the following methods:

• getSelectedItem(): Returns the currently selected item.
• isLoading(): Returns true if data is being loaded from the server.
• getError(): Returns the current error (if any) encountered during the fetch.

Optional Styling

If you want to use the default styles, you can manually include the style.css file in your project. To do this, copy the style.css file from the package into your project's stylesheet directory and link it in your HTML file:

<link rel="stylesheet" href="path/to/your/project/style.css">

Alternatively, if you're using a bundler like Webpack, you can import the CSS directly:

import 'searchable-input-field/src/style.css';

Example Form Submission

When a form is submitted, the selected item's ID will be included as a POST parameter:

Copy code
POST /submit
Content-Type: application/x-www-form-urlencoded

productId=1

Notes

• If using a server-based search, ensure your server endpoint supports filtering based on the query parameter ?query=SEARCH_TERM.
• If the search results are not displaying, make sure the items or url parameter is correctly set and that the server is returning data in the expected format (array of objects with id and name).