Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Highlight matching string in autosuggest entries.

Browse Source
This commit is contained in:
Aaron van Geffen 2021-02-15 12:10:09 +01:00
parent 889302cd36
commit 4402521051
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/js/autosuggest.js
View File

@ -116,22 +116,33 @@ class AutoSuggest {
fillContainer(response) { fillContainer(response) {
this.selectedIndex = 0; this.selectedIndex = 0;
let query = this.input.value.trim().replace(/[\-\[\]{}()*+?.,\\\/^\$|#]/g, ' ');
let query_tokens = query.split(/ +/).sort((a,b) => a.length - b.length);
response.items.forEach((item, i) => { response.items.forEach((item, i) => {
let node = document.createElement('li'); let node = document.createElement('li');
let text = document.createTextNode(item.label); node.innerHTML = this.highlightMatches(query_tokens, item.label);
node.jsondata = item; node.jsondata = item;
node.addEventListener('click', event => { node.addEventListener('click', event => {
this.appendCallback(event.target.jsondata); this.appendCallback(event.target.jsondata);
this.closeContainer(); this.closeContainer();
this.clearInput(); this.clearInput();
}); });
node.appendChild(text);
this.container.appendChild(node); this.container.appendChild(node);
if (this.container.children.length === 1) { if (this.container.children.length === 1) {
node.className = 'selected'; node.className = 'selected';
} }
}); });
}; };
highlightMatches(query_tokens, item) {
let itemTokens = item.split(/ +/);
let queryTokens = new RegExp('(' + query_tokens.join('\|') + ')', 'i');
itemTokens.forEach((token, index) => {
item = item.replace(token, token.replace(queryTokens, ($1, match) => '<strong>' + match + '</strong>'));
});
return item;
};
} }
class TagAutoSuggest extends AutoSuggest { class TagAutoSuggest extends AutoSuggest {