63 lines
2.7 KiB
Markdown
63 lines
2.7 KiB
Markdown
# 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
|
|
|
|
###### 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>
|
|
|
|
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>
|
|
|
|
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"); |