Update README.md

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