SearchableInput/README.md

SearchableInput

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

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 Request

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");