"loupe" icons and the
button with which we
can clear the "x" field, as well as the possibility of an animation waiting for the
- results before our
- REST API returns us. See complex-example.
+ results before our REST API returns us.
+
+ See complex-example.
Adding no-result is a bit more complicated so it shows up in the examples. First, add the
- noResults method, then in the onResults method we check whether maches
- returns zero results, if so, it is enough to make a comparison of return matches === 0 ? input:
- matches
- Now just type some non-existent text and no-results will be displayed.
+
Adding no result is a bit more complicated, so it is included in the examples. First, add the
+ noResults method, then in the onResults method we check whether
+ maches returns zero results, if so, it is enough to make a comparison of return matches === 0 ? input:
+ matches.
+
Now you just need to type in non-existent text, and no results will be displayed, only "no
+ results" information.
Instead of the REST API, you can use a static +
Instead of the REST API, you can use a static files
const api='./characters.json'Due to the fact that we
- download the entire json file locally, we should add sorting and filtering the results. We can add
+ download the entire json file locally, we should add sorting and filtering the results.
+
We can add
sorting and filtering in two ways. In the onSearch or onResults
method.
You want to download all the data, nothing easier. You can do it in the onSubmit
method by clicking the mouse on the element, or by pressing enter when the element is selected, but also
- in the onSelectedItem method. That is, selecting an element, either with the mouse or
- by jumping on the elements with the arrows. Open the console and see what happens during these
+ in the onSelectedItem method.
That is, selecting an element, either with the mouse or + by jumping on the elements with the arrows.
+Open the console and see what happens during these events.
- new Autocomplete('search-complex', {
+ new Autocomplete('static-file-data', {
clearButton: true,
selectFirst: true,
howManyCharacters: 1,
@@ -481,15 +501,10 @@ javascript
const { name, nickname, birthday, img, portrayed } = matches;
const template = `
- <h2>
- <a href="https://www.imdb.com/find?q=${encodeURI(portrayed)}" target="_blank">
- ${portrayed}
- </a>
- </h2>
<p>name - ${name}</p>
- <p>nickname - ${nickname}</p>
<p>birthday - ${birthday}</p>
<div class="image"><img src="${img}"></div>`;
+
const info = document.querySelector('.info-d');
info.classList.add('active-data');
info.innerHTML = template;
@@ -504,10 +519,149 @@ javascript
+
+
+
+
+ Data grouping
+ First, we declare the class of group members classGroup: 'group-by'
+
+ Then we sort by our group, in our case it will be status ['Alive', 'Deceased', 'Presumed
+ dead', 'Unknown'],
+ then we
+ sort by
+ name.
+ Of course, it is not always needed, because we should get such soroting from our
+ api 'REST API'
+
+
+ The next thing is the onResults method which returns the third element of the group class
+ name which
+ will prevent moving between result records with the arrow and with the mouse.
+ This class should be added to the group items.
+
+
+
+
+
+
+ html
+
+
+ javascript
+
+ new Autocomplete('group', {
+ clearButton: true,
+ howManyCharacters: 1,
+
+ // enter the name of the class by
+ // which you will name the group element
+ classGroup: 'group-by',
+
+ onSearch: (input) => {
+ const api = './characters.json';
+ return new Promise((resolve) => {
+ fetch(api)
+ .then((response) => response.json())
+ .then((data) => {
+
+ // First, we sort by our group, in our case
+ // it will be the status, then we sort by name.
+ // Of course, it is not always necessary because
+ // such soroting may be obtained from REST API
+ const result = data
+ .sort((a, b) => a.status.localeCompare(b.status) || a.name.localeCompare(b.name))
+ .filter(element => {
+ return element.name.match(new RegExp(input, 'gi'))
+ })
+ resolve(result);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ });
+ },
+ onResults: (matches, input, className) => {
+ return matches === 0 ? input : matches
+ .map((el, index, array) => {
+
+ // we create an element of the group
+ let group = el.status !== array[index - 1]?.status
+ ? `<li class="${className}">GROUP: ${el.status}</div>`
+ : '';
+
+ return `
+ ${group}
+ <li class="loupe">
+ <p>${el.name.replace(new RegExp(input, 'gi'), (str) => `<b>${str}</b>`)}</p>
+ </li>`;
+ }).join('');
+ },
+ onSubmit: (matches, input) => {
+ console.log(`You selected ${input}`);
+ },
+ onSelectedItem: (index, matches) => {
+ console.log('onSelectedItem:', index, matches);
+ },
+ noResults: (input, resultRender) => resultRender(`<li>No results found: "${input}"</li>`),
+});
+
+
+
+
+
+
+
+
+
+ Local data
+ Not only json or rest api file, but also data can be downloaded locally.
+ Also in this case, you need to sort and filter the data.
+
+
+
+
+
+
+ html
+
+
+ javascript
+
+ new Autocomplete('local', {
+ howManyCharacters: 1,
+
+ onSearch: (input) => {
+
+ // local data
+ const data = [
+ { "name": "Walter White" },
+ { "name": "Jesse Pinkman" },
+ { "name": "Skyler White" },
+ { "name": "Walter White Jr." }
+ ];
+ return data.sort((a, b) => a.name.localeCompare(b.name))
+ .filter(element => {
+ return element.name.match(new RegExp(input, 'gi'))
+ })
+ },
+ onResults: (matches) => {
+ return matches
+ .map((el) => {
+ return `
+ <li>${el.name}</li>`;
+ }).join('');
+ },
+});
+
+
+
+
+
-
+
- Other usage ideas
+ Address geocoding
Below is an example of how to combine city geocoding with the AUTOCOMPLETE library. In
fact, there are many ideas for using it ;)
@@ -520,314 +674,7 @@ Other usage ideas
-
+