diff --git a/README.md b/README.md index 10f5b02..21a38bc 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,62 @@ A JavaScript and CSS library for augmenting raw HTML inputs with modern search features -Testing webhook -Another edit -Another edit -Another edit -Another edit +###### Requirements -testingggg \ No newline at end of file +* 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: + +
+ +
+
My first item's label
+
My second item's label
+
My third item's label
+
My fourth item's label
+
My fifth item's label
+
+
+ +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: + +
+
My first item's label
+
My second item's label
+ ... +
+ +Then, in the `div.items` container beneath the input, set its `data-source` attribute to a valid selector: + +
+ +
+
+ +Alternatively, you can set the `data-source-api` to access a GET endpoint that responds with `application/json`: + +
+ +
+
+ +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"); \ No newline at end of file