diff --git a/README.md b/README.md index d258a99..d16edca 100644 --- a/README.md +++ b/README.md @@ -27,14 +27,17 @@ Let's start with the following html code: ```html
+ + +
``` @@ -43,14 +46,42 @@ Let's start with the following html code: Use javascript for a complete experience: ```js -import Suggestions from './suggestions.js'; -import DatalistSource from './datalist-source.js'; +import { Suggestions, Source } from './suggestions.js'; + +const input = document.getElementById('name-input'); +const datalist = document.getElementById('names'); + +//Generate the available results from the +const source = Source.createFromElement(datalist); + +//Generate the suggestions joining the input and the source values +const suggestions = new Suggestions(input, source); +``` + +## Use with AJAX + +Create a search form: + +```html +
+ + + +
+``` + +Instead `Source`, use the `AjaxSource` class: + +```js +import { Suggestions, AjaxSource } from './suggestions.js'; -//Get the input const input = document.getElementById('name-input'); +const datalist = document.getElementById('names'); -//Generate the available results from the related -const source = new DatalistSource(input); +//Generate the api connection +const source = new AjaxSource('/api/search.json'); //Generate the suggestions joining the input and the source values const suggestions = new Suggestions(input, source);