converted autoComplete.js to ts
This commit is contained in:
huangjx
353
src/lib/autoComplete.ts
Normal file
353
src/lib/autoComplete.ts
Normal file
@@ -0,0 +1,353 @@
|
||||
import eventHandler from "./eventHandler";
|
||||
type callback = (event: any) => void;
|
||||
type target = string | Element | HTMLElement | Window | Document
|
||||
type commonEle = Node | HTMLElement
|
||||
type listData = Array<string>;
|
||||
interface sgBox<T extends HTMLElement = HTMLDivElement> {
|
||||
box: T;
|
||||
maxHeight: number;
|
||||
suggestionHeight: number;
|
||||
};
|
||||
interface icache {
|
||||
[key: string]: any;
|
||||
}
|
||||
interface Entity<T extends Node = HTMLInputElement> {
|
||||
element: T;
|
||||
sgBox: sgBox;
|
||||
cache: icache;
|
||||
lastValue: string;
|
||||
};
|
||||
interface ioptions {
|
||||
selector: string | NodeList;
|
||||
data: Array<string>;
|
||||
sourceHandler: () => listData;
|
||||
minChars: number;
|
||||
delay: number;
|
||||
offsetLeft: number;
|
||||
offsetTop: number;
|
||||
cache: boolean;
|
||||
menuClass: string;
|
||||
onSelect: (event: Event, item: string, search: Element) => void;
|
||||
renderer: (term: string, search: string) => void;
|
||||
}
|
||||
class autoComplete {
|
||||
options: ioptions;
|
||||
element: Entity;
|
||||
elements: Array<Entity> = [];
|
||||
static UP = 38;
|
||||
static DOWN = 40;
|
||||
static ENTER = 13;
|
||||
static ESC = 27;
|
||||
constructor(options: ioptions) {
|
||||
|
||||
this.options = {
|
||||
selector: "",
|
||||
sourceHandler: null,
|
||||
minChars: 3,
|
||||
delay: 150,
|
||||
offsetLeft: 0,
|
||||
offsetTop: 1,
|
||||
cache: true,
|
||||
menuClass: '',
|
||||
onSelect: function (e, term, item) { },
|
||||
data: [],
|
||||
renderer: function (item: string, search: string) {
|
||||
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
var re = new RegExp(`(${search.split(' ').join('|')})`, "gi");
|
||||
return `<div class="suggestion-item" data-val="${item}">${item.replace(re, "<b>$1</b>")}</div>`;
|
||||
}
|
||||
};
|
||||
|
||||
Object.assign(this.options, options);
|
||||
if (typeof this.options.selector !== 'string' && !(this.options.selector instanceof NodeList))
|
||||
throw ("invalid selecor!");
|
||||
let nodelist = this.options.selector instanceof NodeList ? this.options.selector : document.querySelectorAll(this.options.selector);
|
||||
if (nodelist.length < 1) {
|
||||
console.log("no element found for autoComplete")
|
||||
return;
|
||||
}
|
||||
nodelist.forEach((node) => {
|
||||
let element: Entity = {
|
||||
element: node as HTMLInputElement,
|
||||
sgBox: null,
|
||||
cache: [],
|
||||
lastValue: "",
|
||||
};
|
||||
this.elements.push(element)
|
||||
|
||||
})
|
||||
}
|
||||
static getInstance(options: ioptions) {
|
||||
return new autoComplete(options);
|
||||
}
|
||||
run() {
|
||||
for (const element of this.elements) {
|
||||
this.init(element);
|
||||
}
|
||||
}
|
||||
init(value: Entity) {
|
||||
let ele = value.element;
|
||||
ele.setAttribute('autocomplete', 'off');
|
||||
value.sgBox = this.createSuggestionBox();
|
||||
this.attach('resize', window, () => {
|
||||
this.updateSuggestionBox(value);
|
||||
});
|
||||
document.body.appendChild(value.sgBox.box);
|
||||
this.live('suggestion-item', 'mouseleave', function (e) {
|
||||
var sel = value.sgBox.box.querySelector('.suggestion-item.selected');
|
||||
if (sel)
|
||||
setTimeout(function () { sel.className = sel.className.replace('selected', ''); }, 20);
|
||||
}, value.sgBox.box);
|
||||
|
||||
this.live('suggestion-item', 'mouseover', function (e) {
|
||||
var sel = value.sgBox.box.querySelector('.suggestion-item.selected');
|
||||
if (sel) {
|
||||
sel.classList.remove("selected");
|
||||
}
|
||||
this.classList.add("selected");
|
||||
}, value.sgBox.box);
|
||||
const selectHandler = (selected: Element, entity: Entity, e: Event) => {
|
||||
if (autoComplete.hasClass(selected, 'suggestion-item')) {
|
||||
let v = selected.getAttribute('data-val');
|
||||
entity.element.value = v;
|
||||
this.options.onSelect(e, v, selected);
|
||||
this.hideBox(entity.sgBox.box);
|
||||
}
|
||||
}
|
||||
this.live('suggestion-item', 'mousedown,pointerdown', function (e) {
|
||||
e.stopPropagation();
|
||||
//this refers to the found element within;
|
||||
let selected = this;
|
||||
selectHandler(selected, value, e);
|
||||
}, value.sgBox.box);
|
||||
|
||||
this.attach('blur', ele, () => this.blurCallback(value));
|
||||
this.attach('keydown', ele, (e) => this.keyDownCallback(value, e));
|
||||
this.attach('keyup', ele, (e) => this.keyUpCallback(value, e));
|
||||
if (!this.options.minChars)
|
||||
this.attach('focus', ele, (e) => this.focusCallback(value, e));
|
||||
}
|
||||
getCache(key: string, cache: icache) {
|
||||
let data: listData = [];
|
||||
if (!cache) {
|
||||
return data;
|
||||
}
|
||||
if (key in cache) {
|
||||
data = cache[key];
|
||||
} else {
|
||||
//test partial terms against the cache if the full term is not found
|
||||
for (let i = 1; i < key.length - this.options.minChars; i++) {
|
||||
let part = key.slice(0, key.length - i);
|
||||
if (part in cache && !cache[part].length) {
|
||||
data.push(cache[part]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
hideBox(box: HTMLDivElement) {
|
||||
box.style.display = 'none';
|
||||
}
|
||||
showResult(term: string, entity: Entity) {
|
||||
term = term.toLowerCase();
|
||||
let suggestions: listData = [];
|
||||
let data: listData
|
||||
if (this.options.sourceHandler) {
|
||||
data = this.options.sourceHandler()
|
||||
} else {
|
||||
data = this.options.data;
|
||||
}
|
||||
if (!this.options.cache) {
|
||||
for (const item of data) {
|
||||
if (item.toLowerCase().indexOf(term, 0) !== -1) {
|
||||
suggestions.push(item);
|
||||
}
|
||||
}
|
||||
window.setTimeout(() => this.suggest(term, entity, suggestions), this.options.delay)
|
||||
}
|
||||
suggestions = this.getCache(term, entity.cache)
|
||||
//cache found
|
||||
if (suggestions.length >= 1) {
|
||||
this.suggest(term, entity, suggestions)
|
||||
} else {
|
||||
for (const item of data) {
|
||||
if (item.toLowerCase().indexOf(term, 0) !== -1) {
|
||||
suggestions.push(item);
|
||||
}
|
||||
}
|
||||
entity.cache[term] = suggestions;
|
||||
window.setTimeout(() => this.suggest(term, entity, suggestions), this.options.delay)
|
||||
}
|
||||
|
||||
}
|
||||
suggest(term: string, entity: Entity, data: any[]) {
|
||||
if (!entity) {
|
||||
return;
|
||||
}
|
||||
let sgBox = entity.sgBox;
|
||||
if (data.length && term.length >= this.options.minChars) {
|
||||
let s = '';
|
||||
for (var i = 0; i < data.length; i++) s += this.options.renderer(data[i], term);
|
||||
sgBox.box.innerHTML = s;
|
||||
this.updateSuggestionBox(entity, false);
|
||||
}
|
||||
else {
|
||||
this.hideBox(sgBox.box);
|
||||
}
|
||||
}
|
||||
updatePosition(ele: HTMLDivElement, ref: HTMLInputElement) {
|
||||
let rect = ref.getBoundingClientRect();
|
||||
ele.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + this.options.offsetLeft) + 'px';
|
||||
ele.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + this.options.offsetTop) + 'px';
|
||||
ele.style.width = Math.round(rect.right - rect.left) + 'px';
|
||||
}
|
||||
updateSuggestionBox(value: Entity, resize?: boolean, sibling?: commonEle) {
|
||||
let ele = value.element;
|
||||
let sgBox = value.sgBox;
|
||||
let box = sgBox.box;
|
||||
this.updatePosition(box, ele);
|
||||
if (resize && !sibling) {
|
||||
return;
|
||||
}
|
||||
box.style.display = 'block';
|
||||
if (!sgBox.maxHeight) {
|
||||
sgBox.maxHeight = autoComplete.getMaxHeight(sgBox.box);
|
||||
}
|
||||
if (!sgBox.suggestionHeight) {
|
||||
sgBox.suggestionHeight = (<HTMLDivElement>sgBox.box.querySelector('.suggestion-item')).offsetHeight;
|
||||
}
|
||||
|
||||
if (!sgBox.suggestionHeight) {
|
||||
return;
|
||||
}
|
||||
if (!sibling) {
|
||||
sgBox.box.scrollTop = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
let scrTop = sgBox.box.scrollTop
|
||||
let gap = (<HTMLDivElement>sibling).getBoundingClientRect().top - sgBox.box.getBoundingClientRect().top;
|
||||
if (gap + sgBox.suggestionHeight - sgBox.maxHeight > 0) {
|
||||
sgBox.box.scrollTop = gap + sgBox.suggestionHeight + scrTop - sgBox.maxHeight;
|
||||
} else if (gap < 0) {
|
||||
sgBox.box.scrollTop = gap + scrTop;
|
||||
}
|
||||
}
|
||||
static hasClass(el: Element, className: string) {
|
||||
return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
|
||||
}
|
||||
attach(eventType: string, target: target, selector: callback | target, callback?: callback) {
|
||||
eventHandler.add(eventType, target, selector, callback);
|
||||
}
|
||||
live(elClass: string, event: string, cb: callback, context: target) {
|
||||
let events: Array<string>;
|
||||
if (typeof event === 'string' && event.indexOf(',')) {
|
||||
events = event.split(',');
|
||||
} else {
|
||||
events = [event]
|
||||
}
|
||||
for (const val of events) {
|
||||
this.attach(val, context || window.document, function (e) {
|
||||
let el = e.target || e.srcElement;
|
||||
let found: boolean;
|
||||
while (el && !(found = autoComplete.hasClass(el, elClass))) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
if (found) cb.call(el, e);
|
||||
});
|
||||
}
|
||||
}
|
||||
blurCallback(entity: Entity) {
|
||||
let sgBox = entity.sgBox;
|
||||
let hoverActive;
|
||||
try {
|
||||
hoverActive = document.querySelector('.suggestion-container:hover');
|
||||
} catch (e) {
|
||||
hoverActive = 0;
|
||||
}
|
||||
if (!hoverActive) {
|
||||
entity.lastValue = entity.element.value;
|
||||
window.setTimeout(() => this.hideBox(sgBox.box), 350);
|
||||
} else if (entity.element !== document.activeElement) {
|
||||
window.setTimeout(function () {
|
||||
entity.element.focus();
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
//display results matching the term
|
||||
keyUpCallback(entity: Entity, e: KeyboardEvent) {
|
||||
let sgBox = entity.sgBox, options = this.options;
|
||||
var key = window.event ? e.keyCode : e.which;
|
||||
if (!key || (key < 35 || key > 40) && ![autoComplete.ENTER, autoComplete.ESC].includes(key)) {
|
||||
let val = entity.element.value;
|
||||
entity.lastValue = val;
|
||||
if (val.length >= options.minChars) {
|
||||
this.showResult(val, entity);
|
||||
} else {
|
||||
this.hideBox(sgBox.box);;
|
||||
}
|
||||
}
|
||||
};
|
||||
//capture events when the followings key are pressed(down,up,esc,and tab keys)
|
||||
keyDownCallback(entity: Entity, e: KeyboardEvent) {
|
||||
let sgBox = entity.sgBox, options = this.options;
|
||||
var key = window.event ? e.keyCode : e.which;
|
||||
// down =40, up =38
|
||||
if ((key == 40 || key == 38) && sgBox.box.innerHTML) {
|
||||
let sel = sgBox.box.querySelector('.suggestion-item.selected');
|
||||
let next: commonEle;
|
||||
if (!sel) {
|
||||
next = (key == 40) ? sgBox.box.querySelector('.suggestion-item') : sgBox.box.childNodes[sgBox.box.childNodes.length - 1]; // first : last
|
||||
(<HTMLElement>next).className += ' selected';
|
||||
entity.element.value = (<HTMLElement>next).getAttribute('data-val');
|
||||
} else {
|
||||
next = (key == 40) ? sel.nextSibling : sel.previousSibling;
|
||||
if (next) {
|
||||
sel.className = sel.className.replace('selected', '');
|
||||
if (next instanceof Element) {
|
||||
next.className += ' selected';
|
||||
entity.element.value = next.getAttribute('data-val');
|
||||
}
|
||||
}
|
||||
else {
|
||||
sel.className = sel.className.replace('selected', '');
|
||||
entity.element.value = entity.lastValue; next = null;
|
||||
}
|
||||
}
|
||||
this.updateSuggestionBox(entity, false, next);
|
||||
|
||||
//ESC = 27
|
||||
} else if (key == 27) {
|
||||
entity.element.value = entity.lastValue;
|
||||
this.hideBox(sgBox.box);
|
||||
//enter = 13,tab = 9
|
||||
} else if (key == 13 || key == 9) {
|
||||
var sel = sgBox.box.querySelector('.suggestion-item.selected');
|
||||
if (sel && sgBox.box.style.display != 'none') {
|
||||
options.onSelect(e, sel.getAttribute('data-val'), sel);
|
||||
window.setTimeout(() => this.hideBox(sgBox.box), 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
focusCallback(entity: Entity, e: KeyboardEvent) {
|
||||
entity.lastValue = '\n';
|
||||
this.keyUpCallback(entity, e)
|
||||
}
|
||||
|
||||
static getMaxHeight(element: Element) {
|
||||
let style = getComputedStyle(element, null)
|
||||
return parseInt(style.maxHeight);
|
||||
}
|
||||
createSuggestionBox(): sgBox {
|
||||
let sgBox: sgBox = {
|
||||
box: document.createElement('div'),
|
||||
maxHeight: 0,
|
||||
suggestionHeight: 0
|
||||
};
|
||||
sgBox.box.classList.add('suggestion-container');
|
||||
//suggestionBox.classList.add(options.menuClass);
|
||||
return sgBox;
|
||||
}
|
||||
}
|
||||
export default autoComplete;
|
||||
Reference in New Issue
Block a user