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