From dafa268cae9ae8e98d234284957e2f2f3d945f66 Mon Sep 17 00:00:00 2001 From: huangjx Date: Tue, 3 May 2022 17:40:14 +0800 Subject: [PATCH] deleted autocomplete.js --- src/lib/autoComplete.js | 306 ---------------------------------------- 1 file changed, 306 deletions(-) delete mode 100644 src/lib/autoComplete.js diff --git a/src/lib/autoComplete.js b/src/lib/autoComplete.js deleted file mode 100644 index 7e3bfae..0000000 --- a/src/lib/autoComplete.js +++ /dev/null @@ -1,306 +0,0 @@ -class autoComplete { - options; - static UP = 38; - static DOWN = 40; - static ENTER = 13; - static ESC = 27; - static entryClass = ".suggestion-item"; - static entryClassContainer = ".suggestion-container"; - constructor(options) { - this.options = { - selector: 0, - source: 0, - minChars: 3, - delay: 150, - offsetLeft: 0, - offsetTop: 1, - cache: 1, - menuClass: '', - renderItem: function (item, search) { - search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); - var re = new RegExp(`(${search.split(' ').join('|')})`, "gi"); - return `
${item.replace(re, "$1")}
`; - }, - onSelect: function (e, term, item) { } - }; - for (let k in this.options) { - if (options.hasOwnProperty(k)) this.options[k] = options[k]; - } - if (typeof this.options.selector !== 'string' && !(this.options.selector instanceof NodeList)) - throw ("invalid selecor!"); - this.elements = typeof this.options.selector == 'object' ? this.options.selector : document.querySelectorAll(this.options.selector); - } - static getInstance(options) { - return new autoComplete(options); - } - attachData(element) { - element.rect = element.getBoundingClientRect(); - element.sgBox = this.createSuggestionBox(); - element.options = this.options; - } - run() { - for (const element of this.elements) { - this.init(element); - } - } - - init(element) { - element.autocompleteAttr = element.getAttribute('autocomplete'); - element.setAttribute('autocomplete', 'off'); - element.cache = {}; - element.lastValue = ''; - this.attachData(element); - this.attach('resize', window, function (e) { - autoComplete.updateSuggestionBox(element); - }); - document.body.appendChild(element.sgBox); - this.live('suggestion-item', 'mouseleave', function (e) { - var sel = element.sgBox.querySelector('.suggestion-item.selected'); - if (sel) - setTimeout(function () { sel.className = sel.className.replace('selected', ''); }, 20); - }, element.sgBox); - - this.live('suggestion-item', 'mouseover', function (e) { - var sel = element.sgBox.querySelector('.suggestion-item.selected'); - if (sel) { - sel.classList.remove("selected"); - } - this.className += ' selected'; - }, element.sgBox); - const selectHandler = function (selected, element, e) { - if (autoComplete.hasClass(selected, 'suggestion-item')) { - let v = selected.getAttribute('data-val'); - element.value = v; - element.options.onSelect(e, v, selected); - element.sgBox.style.display = 'none'; - } - } - this.live('suggestion-item', 'mousedown,pointerdown', function (e) { - e.stopPropagation(); - //this refers to the found element within; - let selected = this; - selectHandler(selected, element, e); - }, element.sgBox); - - this.attach('blur', element, autoComplete.blurCallback); - this.attach('keydown', element, autoComplete.keyDownCallback); - this.attach('keyup', element, autoComplete.keyUpCallback); - if (!this.options.minChars) - this.attach('focus', element, autoComplete.focusCallback); - } - static suggest(element, data) { - if (!element) { - return; - } - let sgBox = element.sgBox, options = element.options; - var val = element.value; - element.cache[val] = data; - if (data.length && val.length >= options.minChars) { - var s = ''; - for (var i = 0; i < data.length; i++) s += options.renderItem(data[i], val); - sgBox.innerHTML = s; - autoComplete.updateSuggestionBox(element, 0); - } - else { - sgBox.style.display = 'none'; - } - } - static hasClass(el, className) { - return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className); - } - attach(eventType, target, selector, callback) { - if (typeof selector === 'function' && !callback) { - callback = selector; - selector = target; - } - if (typeof target === 'object') { - if (target.attachEvent) { - target.attachEvent('on' + eventType, function (e) { - callback.call(target, e); - }); - } - else { - target.addEventListener(eventType, function (e) { - callback.call(target, e); - }); - } - return; - } - let el = document.querySelector(target); - if (!el) { - return; - } - el.addEventListener(eventType, function (e) { - let element = e.target; - if (element === this) { - callback.call(element, e); - return; - } - for (; element && element != this; element = element.parentNode) { - if (element.matches(selector)) { - callback.call(element, e); - break; - } - } - }); - } - live(elClass, event, cb, context) { - if (typeof event === 'string' && event.indexOf(',')) { - var events = event.split(','); - } - for (const event of events) { - this.attach(event, context || document, function (e) { - var found, el = e.target || e.srcElement; - while (el && !(found = autoComplete.hasClass(el, elClass))) - el = el.parentElement; - if (found) cb.call(el, e); - }); - } - } - static blurCallback(e) { - let element = this - let sgBox = element.sgBox; - let hoverActive; - try { - hoverActive = document.querySelector('.suggestion-container:hover'); - } catch (e) { - hoverActive = 0; - } - if (!hoverActive) { - element.lastValue = element.value; - sgBox.style.display = 'none'; - setTimeout(function () { sgBox.style.display = 'none'; }, 350); - } else if (element !== document.activeElement) { - setTimeout(function () { - element.focus(); - }, 20); - } - } - static keyUpCallback(e) { - let element = this; - let sgBox = element.sgBox, options = element.options; - var key = window.event ? e.keyCode : e.which; - if (!key || (key < 35 || key > 40) && ![autoComplete.ENTER, autoComplete.ESC].includes(key)) { - var val = element.value; - if (val.length >= options.minChars) { - if (val != element.lastValue) { - element.lastValue = val; - clearTimeout(element.timer); - if (options.cache) { - if (val in element.cache) { - autoComplete.suggest(element, element.cache[val]); return; - } - for (var i = 1; i < val.length - options.minChars; i++) { - var part = val.slice(0, val.length - i); - if (part in element.cache && !element.cache[part].length) { - autoComplete.suggest([]); - return; - } - } - } - const msuggest = function (data) { - autoComplete.suggest(element, data); - } - element.timer = setTimeout(function () { options.source(val, msuggest) }, options.delay); - } - } else { - element.lastValue = val; - sgBox.style.display = 'none'; - } - } - }; - - static keyDownCallback(e) { - let element = this; - let sgBox = element.sgBox, options = element.options; - var key = window.event ? e.keyCode : e.which; - // down =40, up =38 - if ((key == 40 || key == 38) && sgBox.innerHTML) { - var next, sel = sgBox.querySelector('.suggestion-item.selected'); - if (!sel) { - next = (key == 40) ? sgBox.querySelector('.suggestion-item') : sgBox.childNodes[scBox.childNodes.length - 1]; // first : last - next.className += ' selected'; - element.value = next.getAttribute('data-val'); - } else { - next = (key == 40) ? sel.nextSibling : sel.previousSibling; - if (next) { - sel.className = sel.className.replace('selected', ''); - next.className += ' selected'; - element.value = next.getAttribute('data-val'); - } - else { - sel.className = sel.className.replace('selected', ''); - element.value = element.lastValue; next = 0; - } - } - autoComplete.updateSuggestionBox(element, 0, next); - return false; - //ESC = 27 - } else if (key == 27) { - element.value = element.lastValue; - sgBox.style.display = 'none'; - //enter = 13,tab = 9 - } else if (key == 13 || key == 9) { - var sel = sgBox.querySelector('.suggestion-item.selected'); - if (sel && sgBox.style.display != 'none') { - options.onSelect(e, sel.getAttribute('data-val'), sel); - setTimeout(function () { sgBox.style.display = 'none'; }, 20); - } - } - } - - static focusCallback(e) { - let element = this; - element.lastValue = '\n'; - autoComplete.keyUpCallback(e) - } - - static getMaxHeight(element) { - let style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle; - return parseInt(style.maxHeight); - } - - static updatePosition(element, rect, options) { - element.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + options.offsetLeft) + 'px'; - element.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + options.offsetTop) + 'px'; - element.style.width = Math.round(rect.right - rect.left) + 'px'; - } - - static updateSuggestionBox(element, resize, next) { - let sgBox = element.sgBox, rect = element.getBoundingClientRect(), options = element.options; - autoComplete.updatePosition(sgBox, rect, options); - if (resize && !next) { - return; - } - sgBox.style.display = 'block'; - if (!sgBox.maxHeight) { - sgBox.maxHeight = autoComplete.getMaxHeight(sgBox); - } - if (!sgBox.suggestionHeight) { - sgBox.suggestionHeight = sgBox.querySelector('.suggestion-item').offsetHeight; - } - - if (!sgBox.suggestionHeight) { - return; - } - if (!next) { - sgBox.scrollTop = 0; - return; - } - - let scrTop = sgBox.scrollTop - let selTop = next.getBoundingClientRect().top - sgBox.getBoundingClientRect().top; - if (selTop + sgBox.suggestionHeight - sgBox.maxHeight > 0) { - sgBox.scrollTop = selTop + sgBox.suggestionHeight + scrTop - sgBox.maxHeight; - } else if (selTop < 0) { - sgBox.scrollTop = selTop + scrTop; - } - } - createSuggestionBox() { - let sgBox = document.createElement('div'); - sgBox.classList.add('suggestion-container'); - //suggestionBox.classList.add(options.menuClass); - return sgBox; - } -} -export default autoComplete; \ No newline at end of file