SearchableInput

A JavaScript and CSS library for augmenting raw HTML inputs with modern search features

Requirements

• jQuery

Features

• Support for locally rendered options and options returned via a GET request

Basic Usage

Include both the SearchableInput.js and SearchableInput.css files in your page's source and wrap any text input like the following:

<div class="searchable-input">
    <input type="text" name="someInputName" />
    <div class="items">
        <div class="item" data-value="myItemId0">My first item's label</div>
        <div class="item" data-value="myItemId1">My second item's label</div>
        <div class="item" data-value="myItemId2">My third item's label</div>
        <div class="item" data-value="myItemId3">My fourth item's label</div>
        <div class="item" data-value="myItemId4">My fifth item's label</div>
    </div>
</div>

Shared Item Source

If multiple inputs require the same source of data, put your div.item options in a hidden div somewhere in the document accessible by its id attribute:

<div id="items-source">
    <div class="item" data-value="myItemId0">My first item's label</div>
    <div class="item" data-value="myItemId1">My second item's label</div>
    ...
</div>

Then, in the div.items container beneath the input, set its data-source attribute to a valid selector:

<div class="searchable-input">
    <input type="text" name="someInputName" />
    <div class="items" data-source="#items-source"></div>
</div>

Items from GET (application/json)

Alternatively, you can set the data-source-api to access a GET endpoint that responds with application/json:

<div class="searchable-input">
    <input type="text" name="someInputName" />
    <div class="items" data-source-api="/v1/users"></div>
</div>

Note: After a cooldown period, a call to /v1/users?q=TEXT will be made where TEXT is the user's input. This can be used to perform text searches within a database to return a smaller set of data. No form of pagination is supported at this time.

Your /v1/users must respond with application/json and it must be in the following format:

[
    {"name": "My first item's label", "value": "myItemId0"},
    {"name": "My second item's label", "value": "myItemId1"},
    {"name": "My third item's label", "value": "myItemId2"},
    ...
]

The text search will be performed on the item's label, but the input's data-value will be assigned to the data-value of the chosen div.item. To access the effective value of the input (not the user's text input), access the input's data-value attribute like so:

$("input[name='someInputName']").first().attr("data-value");