my-autocompletec
Advanced tools
Comparing version 0.0.1 to 0.1.0
@@ -88,4 +88,6 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
var _objectAssign = __webpack_require__(1); | ||
__webpack_require__(1); | ||
var _objectAssign = __webpack_require__(6); | ||
var _objectAssign2 = _interopRequireDefault(_objectAssign); | ||
@@ -130,2 +132,3 @@ | ||
AutoComplete.prototype._changeAutoCompleteDebounce = debounce(AutoComplete.prototype._changeAutoComplete, opts.debounce); | ||
//阻止光标上下键移动 | ||
self.target.addEventListener('keydown', function (e) { | ||
@@ -137,2 +140,3 @@ var code = e.which || e.keyCode; | ||
}); | ||
//keyup中可以同时获取到keyCode和input的value | ||
self.target.addEventListener('keyup', function (e) { | ||
@@ -142,10 +146,12 @@ e.preventDefault(); | ||
var inputValue = e.target.value; | ||
self._changeAutoComplete(code, inputValue); | ||
self._handleInput(code, inputValue); | ||
}); | ||
} | ||
AutoComplete.prototype._changeAutoComplete = function (code, inputValue) { | ||
console.log('complete ' + inputValue); | ||
console.log('code ' + code); | ||
var autoc = this.autoc; | ||
AutoComplete.prototype._handleInput = function (code, inputValue) { | ||
//排除 shift,ctrl,alt键 | ||
var excludes = [16, 17, 18]; | ||
if (excludes.indexOf(code) > -1) { | ||
return; | ||
} | ||
//上键 38 | ||
@@ -168,21 +174,30 @@ if (code == 38) { | ||
this._highlightAutoComplete(this.pos); | ||
} else { | ||
var resultData = this._findData(inputValue, this.opts.dataset); | ||
this.resultData = resultData; | ||
this.originValue = inputValue; | ||
if (resultData && resultData.length) { | ||
autoc.style.display = 'block'; | ||
var dataHtml = resultData.map(function (item) { | ||
return '<li class="auto-item">\n <div class="auto-inner">' + item.value + '</div>\n </li>'; | ||
}).join(''); | ||
autoc.querySelector('.autos').innerHTML = dataHtml; | ||
} | ||
//回车 | ||
else if (code == 13) { | ||
this._highlightAutoComplete(this.pos, true); | ||
} else { | ||
autoc.style.display = 'none'; | ||
this._changeAutoCompleteDebounce(inputValue); | ||
} | ||
//重置位置 | ||
this.pos = -1; | ||
} | ||
}; | ||
AutoComplete.prototype._highlightAutoComplete = function (pos) { | ||
AutoComplete.prototype._changeAutoComplete = function (inputValue) { | ||
var autoc = this.autoc; | ||
var resultData = this._findData(inputValue, this.opts.dataset); | ||
this.resultData = resultData; | ||
this.originValue = inputValue; | ||
if (resultData && resultData.length) { | ||
autoc.style.display = 'block'; | ||
var dataHtml = resultData.map(function (item) { | ||
return '<li class="auto-item">\n <div class="auto-inner">' + item.value + '</div>\n </li>'; | ||
}).join(''); | ||
autoc.querySelector('.autos').innerHTML = dataHtml; | ||
} else { | ||
autoc.style.display = 'none'; | ||
} | ||
//重置位置 | ||
this.pos = -1; | ||
}; | ||
AutoComplete.prototype._highlightAutoComplete = function (pos, bEnter) { | ||
var items = Array.prototype.slice.call(this.autoc.querySelectorAll('.auto-item')); | ||
@@ -194,3 +209,7 @@ items.forEach(function (item) { | ||
var activeItem = items[pos]; | ||
addClass(activeItem, 'active'); | ||
if (bEnter) { | ||
this.autoc.style.display = 'none'; | ||
} else { | ||
addClass(activeItem, 'active'); | ||
} | ||
this.target.value = activeItem.querySelector('.auto-inner').innerHTML; | ||
@@ -234,2 +253,629 @@ } else { | ||
var content = __webpack_require__(2); | ||
if(typeof content === 'string') content = [[module.i, content, '']]; | ||
var transform; | ||
var insertInto; | ||
var options = {"hmr":true} | ||
options.transform = transform | ||
options.insertInto = undefined; | ||
var update = __webpack_require__(4)(content, options); | ||
if(content.locals) module.exports = content.locals; | ||
if(false) { | ||
module.hot.accept("!!../node_modules/_css-loader@1.0.0@css-loader/index.js!./index.css", function() { | ||
var newContent = require("!!../node_modules/_css-loader@1.0.0@css-loader/index.js!./index.css"); | ||
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']]; | ||
var locals = (function(a, b) { | ||
var key, idx = 0; | ||
for(key in a) { | ||
if(!b || a[key] !== b[key]) return false; | ||
idx++; | ||
} | ||
for(key in b) idx--; | ||
return idx === 0; | ||
}(content.locals, newContent.locals)); | ||
if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.'); | ||
update(newContent); | ||
}); | ||
module.hot.dispose(function() { update(); }); | ||
} | ||
/***/ }), | ||
/* 2 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
exports = module.exports = __webpack_require__(3)(false); | ||
// imports | ||
// module | ||
exports.push([module.i, ".autoc{\n position: absolute;\n text-align: left;\n border: 1px solid #ccc;\n border-top:0;\n display: none;\n}\n.autoc ul{\n list-style-type: none;\n}\n.autoc ul,.autoc li{\n margin: 0;\n padding: 0;\n}\n.auto-inner{\n padding: 5px;\n}\n.auto-item.active .auto-inner{\n background-color:#ccc;\n}", ""]); | ||
// exports | ||
/***/ }), | ||
/* 3 */ | ||
/***/ (function(module, exports) { | ||
/* | ||
MIT License http://www.opensource.org/licenses/mit-license.php | ||
Author Tobias Koppers @sokra | ||
*/ | ||
// css base code, injected by the css-loader | ||
module.exports = function(useSourceMap) { | ||
var list = []; | ||
// return the list of modules as css string | ||
list.toString = function toString() { | ||
return this.map(function (item) { | ||
var content = cssWithMappingToString(item, useSourceMap); | ||
if(item[2]) { | ||
return "@media " + item[2] + "{" + content + "}"; | ||
} else { | ||
return content; | ||
} | ||
}).join(""); | ||
}; | ||
// import a list of modules into the list | ||
list.i = function(modules, mediaQuery) { | ||
if(typeof modules === "string") | ||
modules = [[null, modules, ""]]; | ||
var alreadyImportedModules = {}; | ||
for(var i = 0; i < this.length; i++) { | ||
var id = this[i][0]; | ||
if(typeof id === "number") | ||
alreadyImportedModules[id] = true; | ||
} | ||
for(i = 0; i < modules.length; i++) { | ||
var item = modules[i]; | ||
// skip already imported module | ||
// this implementation is not 100% perfect for weird media query combinations | ||
// when a module is imported multiple times with different media queries. | ||
// I hope this will never occur (Hey this way we have smaller bundles) | ||
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { | ||
if(mediaQuery && !item[2]) { | ||
item[2] = mediaQuery; | ||
} else if(mediaQuery) { | ||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; | ||
} | ||
list.push(item); | ||
} | ||
} | ||
}; | ||
return list; | ||
}; | ||
function cssWithMappingToString(item, useSourceMap) { | ||
var content = item[1] || ''; | ||
var cssMapping = item[3]; | ||
if (!cssMapping) { | ||
return content; | ||
} | ||
if (useSourceMap && typeof btoa === 'function') { | ||
var sourceMapping = toComment(cssMapping); | ||
var sourceURLs = cssMapping.sources.map(function (source) { | ||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' | ||
}); | ||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); | ||
} | ||
return [content].join('\n'); | ||
} | ||
// Adapted from convert-source-map (MIT) | ||
function toComment(sourceMap) { | ||
// eslint-disable-next-line no-undef | ||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); | ||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; | ||
return '/*# ' + data + ' */'; | ||
} | ||
/***/ }), | ||
/* 4 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
/* | ||
MIT License http://www.opensource.org/licenses/mit-license.php | ||
Author Tobias Koppers @sokra | ||
*/ | ||
var stylesInDom = {}; | ||
var memoize = function (fn) { | ||
var memo; | ||
return function () { | ||
if (typeof memo === "undefined") memo = fn.apply(this, arguments); | ||
return memo; | ||
}; | ||
}; | ||
var isOldIE = memoize(function () { | ||
// Test for IE <= 9 as proposed by Browserhacks | ||
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 | ||
// Tests for existence of standard globals is to allow style-loader | ||
// to operate correctly into non-standard environments | ||
// @see https://github.com/webpack-contrib/style-loader/issues/177 | ||
return window && document && document.all && !window.atob; | ||
}); | ||
var getTarget = function (target) { | ||
return document.querySelector(target); | ||
}; | ||
var getElement = (function (fn) { | ||
var memo = {}; | ||
return function(target) { | ||
// If passing function in options, then use it for resolve "head" element. | ||
// Useful for Shadow Root style i.e | ||
// { | ||
// insertInto: function () { return document.querySelector("#foo").shadowRoot } | ||
// } | ||
if (typeof target === 'function') { | ||
return target(); | ||
} | ||
if (typeof memo[target] === "undefined") { | ||
var styleTarget = getTarget.call(this, target); | ||
// Special case to return head of iframe instead of iframe itself | ||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) { | ||
try { | ||
// This will throw an exception if access to iframe is blocked | ||
// due to cross-origin restrictions | ||
styleTarget = styleTarget.contentDocument.head; | ||
} catch(e) { | ||
styleTarget = null; | ||
} | ||
} | ||
memo[target] = styleTarget; | ||
} | ||
return memo[target] | ||
}; | ||
})(); | ||
var singleton = null; | ||
var singletonCounter = 0; | ||
var stylesInsertedAtTop = []; | ||
var fixUrls = __webpack_require__(5); | ||
module.exports = function(list, options) { | ||
if (typeof DEBUG !== "undefined" && DEBUG) { | ||
if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); | ||
} | ||
options = options || {}; | ||
options.attrs = typeof options.attrs === "object" ? options.attrs : {}; | ||
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style> | ||
// tags it will allow on a page | ||
if (!options.singleton && typeof options.singleton !== "boolean") options.singleton = isOldIE(); | ||
// By default, add <style> tags to the <head> element | ||
if (!options.insertInto) options.insertInto = "head"; | ||
// By default, add <style> tags to the bottom of the target | ||
if (!options.insertAt) options.insertAt = "bottom"; | ||
var styles = listToStyles(list, options); | ||
addStylesToDom(styles, options); | ||
return function update (newList) { | ||
var mayRemove = []; | ||
for (var i = 0; i < styles.length; i++) { | ||
var item = styles[i]; | ||
var domStyle = stylesInDom[item.id]; | ||
domStyle.refs--; | ||
mayRemove.push(domStyle); | ||
} | ||
if(newList) { | ||
var newStyles = listToStyles(newList, options); | ||
addStylesToDom(newStyles, options); | ||
} | ||
for (var i = 0; i < mayRemove.length; i++) { | ||
var domStyle = mayRemove[i]; | ||
if(domStyle.refs === 0) { | ||
for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](); | ||
delete stylesInDom[domStyle.id]; | ||
} | ||
} | ||
}; | ||
}; | ||
function addStylesToDom (styles, options) { | ||
for (var i = 0; i < styles.length; i++) { | ||
var item = styles[i]; | ||
var domStyle = stylesInDom[item.id]; | ||
if(domStyle) { | ||
domStyle.refs++; | ||
for(var j = 0; j < domStyle.parts.length; j++) { | ||
domStyle.parts[j](item.parts[j]); | ||
} | ||
for(; j < item.parts.length; j++) { | ||
domStyle.parts.push(addStyle(item.parts[j], options)); | ||
} | ||
} else { | ||
var parts = []; | ||
for(var j = 0; j < item.parts.length; j++) { | ||
parts.push(addStyle(item.parts[j], options)); | ||
} | ||
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts}; | ||
} | ||
} | ||
} | ||
function listToStyles (list, options) { | ||
var styles = []; | ||
var newStyles = {}; | ||
for (var i = 0; i < list.length; i++) { | ||
var item = list[i]; | ||
var id = options.base ? item[0] + options.base : item[0]; | ||
var css = item[1]; | ||
var media = item[2]; | ||
var sourceMap = item[3]; | ||
var part = {css: css, media: media, sourceMap: sourceMap}; | ||
if(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]}); | ||
else newStyles[id].parts.push(part); | ||
} | ||
return styles; | ||
} | ||
function insertStyleElement (options, style) { | ||
var target = getElement(options.insertInto) | ||
if (!target) { | ||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid."); | ||
} | ||
var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1]; | ||
if (options.insertAt === "top") { | ||
if (!lastStyleElementInsertedAtTop) { | ||
target.insertBefore(style, target.firstChild); | ||
} else if (lastStyleElementInsertedAtTop.nextSibling) { | ||
target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling); | ||
} else { | ||
target.appendChild(style); | ||
} | ||
stylesInsertedAtTop.push(style); | ||
} else if (options.insertAt === "bottom") { | ||
target.appendChild(style); | ||
} else if (typeof options.insertAt === "object" && options.insertAt.before) { | ||
var nextSibling = getElement(options.insertInto + " " + options.insertAt.before); | ||
target.insertBefore(style, nextSibling); | ||
} else { | ||
throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n"); | ||
} | ||
} | ||
function removeStyleElement (style) { | ||
if (style.parentNode === null) return false; | ||
style.parentNode.removeChild(style); | ||
var idx = stylesInsertedAtTop.indexOf(style); | ||
if(idx >= 0) { | ||
stylesInsertedAtTop.splice(idx, 1); | ||
} | ||
} | ||
function createStyleElement (options) { | ||
var style = document.createElement("style"); | ||
if(options.attrs.type === undefined) { | ||
options.attrs.type = "text/css"; | ||
} | ||
addAttrs(style, options.attrs); | ||
insertStyleElement(options, style); | ||
return style; | ||
} | ||
function createLinkElement (options) { | ||
var link = document.createElement("link"); | ||
if(options.attrs.type === undefined) { | ||
options.attrs.type = "text/css"; | ||
} | ||
options.attrs.rel = "stylesheet"; | ||
addAttrs(link, options.attrs); | ||
insertStyleElement(options, link); | ||
return link; | ||
} | ||
function addAttrs (el, attrs) { | ||
Object.keys(attrs).forEach(function (key) { | ||
el.setAttribute(key, attrs[key]); | ||
}); | ||
} | ||
function addStyle (obj, options) { | ||
var style, update, remove, result; | ||
// If a transform function was defined, run it on the css | ||
if (options.transform && obj.css) { | ||
result = options.transform(obj.css); | ||
if (result) { | ||
// If transform returns a value, use that instead of the original css. | ||
// This allows running runtime transformations on the css. | ||
obj.css = result; | ||
} else { | ||
// If the transform function returns a falsy value, don't add this css. | ||
// This allows conditional loading of css | ||
return function() { | ||
// noop | ||
}; | ||
} | ||
} | ||
if (options.singleton) { | ||
var styleIndex = singletonCounter++; | ||
style = singleton || (singleton = createStyleElement(options)); | ||
update = applyToSingletonTag.bind(null, style, styleIndex, false); | ||
remove = applyToSingletonTag.bind(null, style, styleIndex, true); | ||
} else if ( | ||
obj.sourceMap && | ||
typeof URL === "function" && | ||
typeof URL.createObjectURL === "function" && | ||
typeof URL.revokeObjectURL === "function" && | ||
typeof Blob === "function" && | ||
typeof btoa === "function" | ||
) { | ||
style = createLinkElement(options); | ||
update = updateLink.bind(null, style, options); | ||
remove = function () { | ||
removeStyleElement(style); | ||
if(style.href) URL.revokeObjectURL(style.href); | ||
}; | ||
} else { | ||
style = createStyleElement(options); | ||
update = applyToTag.bind(null, style); | ||
remove = function () { | ||
removeStyleElement(style); | ||
}; | ||
} | ||
update(obj); | ||
return function updateStyle (newObj) { | ||
if (newObj) { | ||
if ( | ||
newObj.css === obj.css && | ||
newObj.media === obj.media && | ||
newObj.sourceMap === obj.sourceMap | ||
) { | ||
return; | ||
} | ||
update(obj = newObj); | ||
} else { | ||
remove(); | ||
} | ||
}; | ||
} | ||
var replaceText = (function () { | ||
var textStore = []; | ||
return function (index, replacement) { | ||
textStore[index] = replacement; | ||
return textStore.filter(Boolean).join('\n'); | ||
}; | ||
})(); | ||
function applyToSingletonTag (style, index, remove, obj) { | ||
var css = remove ? "" : obj.css; | ||
if (style.styleSheet) { | ||
style.styleSheet.cssText = replaceText(index, css); | ||
} else { | ||
var cssNode = document.createTextNode(css); | ||
var childNodes = style.childNodes; | ||
if (childNodes[index]) style.removeChild(childNodes[index]); | ||
if (childNodes.length) { | ||
style.insertBefore(cssNode, childNodes[index]); | ||
} else { | ||
style.appendChild(cssNode); | ||
} | ||
} | ||
} | ||
function applyToTag (style, obj) { | ||
var css = obj.css; | ||
var media = obj.media; | ||
if(media) { | ||
style.setAttribute("media", media) | ||
} | ||
if(style.styleSheet) { | ||
style.styleSheet.cssText = css; | ||
} else { | ||
while(style.firstChild) { | ||
style.removeChild(style.firstChild); | ||
} | ||
style.appendChild(document.createTextNode(css)); | ||
} | ||
} | ||
function updateLink (link, options, obj) { | ||
var css = obj.css; | ||
var sourceMap = obj.sourceMap; | ||
/* | ||
If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled | ||
and there is no publicPath defined then lets turn convertToAbsoluteUrls | ||
on by default. Otherwise default to the convertToAbsoluteUrls option | ||
directly | ||
*/ | ||
var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap; | ||
if (options.convertToAbsoluteUrls || autoFixUrls) { | ||
css = fixUrls(css); | ||
} | ||
if (sourceMap) { | ||
// http://stackoverflow.com/a/26603875 | ||
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */"; | ||
} | ||
var blob = new Blob([css], { type: "text/css" }); | ||
var oldSrc = link.href; | ||
link.href = URL.createObjectURL(blob); | ||
if(oldSrc) URL.revokeObjectURL(oldSrc); | ||
} | ||
/***/ }), | ||
/* 5 */ | ||
/***/ (function(module, exports) { | ||
/** | ||
* When source maps are enabled, `style-loader` uses a link element with a data-uri to | ||
* embed the css on the page. This breaks all relative urls because now they are relative to a | ||
* bundle instead of the current page. | ||
* | ||
* One solution is to only use full urls, but that may be impossible. | ||
* | ||
* Instead, this function "fixes" the relative urls to be absolute according to the current page location. | ||
* | ||
* A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command. | ||
* | ||
*/ | ||
module.exports = function (css) { | ||
// get current location | ||
var location = typeof window !== "undefined" && window.location; | ||
if (!location) { | ||
throw new Error("fixUrls requires window.location"); | ||
} | ||
// blank or null? | ||
if (!css || typeof css !== "string") { | ||
return css; | ||
} | ||
var baseUrl = location.protocol + "//" + location.host; | ||
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/"); | ||
// convert each url(...) | ||
/* | ||
This regular expression is just a way to recursively match brackets within | ||
a string. | ||
/url\s*\( = Match on the word "url" with any whitespace after it and then a parens | ||
( = Start a capturing group | ||
(?: = Start a non-capturing group | ||
[^)(] = Match anything that isn't a parentheses | ||
| = OR | ||
\( = Match a start parentheses | ||
(?: = Start another non-capturing groups | ||
[^)(]+ = Match anything that isn't a parentheses | ||
| = OR | ||
\( = Match a start parentheses | ||
[^)(]* = Match anything that isn't a parentheses | ||
\) = Match a end parentheses | ||
) = End Group | ||
*\) = Match anything and then a close parens | ||
) = Close non-capturing group | ||
* = Match anything | ||
) = Close capturing group | ||
\) = Match a close parens | ||
/gi = Get all matches, not the first. Be case insensitive. | ||
*/ | ||
var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) { | ||
// strip quotes (if they exist) | ||
var unquotedOrigUrl = origUrl | ||
.trim() | ||
.replace(/^"(.*)"$/, function(o, $1){ return $1; }) | ||
.replace(/^'(.*)'$/, function(o, $1){ return $1; }); | ||
// already a full url? no change | ||
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(unquotedOrigUrl)) { | ||
return fullMatch; | ||
} | ||
// convert the url to a full url | ||
var newUrl; | ||
if (unquotedOrigUrl.indexOf("//") === 0) { | ||
//TODO: should we add protocol? | ||
newUrl = unquotedOrigUrl; | ||
} else if (unquotedOrigUrl.indexOf("/") === 0) { | ||
// path should be relative to the base url | ||
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/' | ||
} else { | ||
// path should be relative to current directory | ||
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './' | ||
} | ||
// send back the fixed url(...) | ||
return "url(" + JSON.stringify(newUrl) + ")"; | ||
}); | ||
// send back the fixed css | ||
return fixedCss; | ||
}; | ||
/***/ }), | ||
/* 6 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
@@ -236,0 +882,0 @@ /* |
{ | ||
"name": "my-autocompletec", | ||
"version": "0.0.1", | ||
"version": "0.1.0", | ||
"description": "image autocomplete", | ||
@@ -27,2 +27,5 @@ "main": "./dist/autocomplete.js", | ||
"babel-preset-es2015": "6.18.0", | ||
"css-loader": "^1.0.0", | ||
"sass-loader": "^7.0.3", | ||
"style-loader": "^0.21.0", | ||
"webpack": "3.x" | ||
@@ -29,0 +32,0 @@ }, |
@@ -0,1 +1,2 @@ | ||
import './index.css'; | ||
import assign from 'object-assign'; | ||
@@ -40,2 +41,3 @@ | ||
AutoComplete.prototype._changeAutoCompleteDebounce = debounce(AutoComplete.prototype._changeAutoComplete,opts.debounce); | ||
//阻止光标上下键移动 | ||
self.target.addEventListener('keydown',function(e){ | ||
@@ -47,2 +49,3 @@ var code = e.which || e.keyCode; | ||
}); | ||
//keyup中可以同时获取到keyCode和input的value | ||
self.target.addEventListener('keyup',function(e){ | ||
@@ -52,10 +55,12 @@ e.preventDefault(); | ||
var inputValue = e.target.value; | ||
self._changeAutoComplete(code,inputValue); | ||
self._handleInput(code,inputValue); | ||
}); | ||
} | ||
AutoComplete.prototype._changeAutoComplete = function(code,inputValue){ | ||
console.log('complete ' + inputValue); | ||
console.log('code ' + code); | ||
var autoc = this.autoc; | ||
AutoComplete.prototype._handleInput = function(code,inputValue){ | ||
//排除 shift,ctrl,alt键 | ||
var excludes = [16,17,18]; | ||
if(excludes.indexOf(code) > -1){ | ||
return; | ||
} | ||
//上键 38 | ||
@@ -81,25 +86,33 @@ if(code == 38){ | ||
} | ||
//回车 | ||
else if(code == 13){ | ||
this._highlightAutoComplete(this.pos,true); | ||
} | ||
else{ | ||
//todo add debounce | ||
var resultData = this._findData(inputValue,this.opts.dataset); | ||
this.resultData = resultData; | ||
this.originValue = inputValue; | ||
if(resultData && resultData.length){ | ||
autoc.style.display = 'block'; | ||
var dataHtml = resultData.map(function(item){ | ||
return `<li class="auto-item"> | ||
<div class="auto-inner">${item.value}</div> | ||
</li>` | ||
}).join(''); | ||
autoc.querySelector('.autos').innerHTML = dataHtml; | ||
} | ||
else{ | ||
autoc.style.display = 'none'; | ||
} | ||
//重置位置 | ||
this.pos = -1; | ||
this._changeAutoCompleteDebounce(inputValue); | ||
} | ||
} | ||
AutoComplete.prototype._highlightAutoComplete = function(pos){ | ||
AutoComplete.prototype._changeAutoComplete = function(inputValue){ | ||
var autoc = this.autoc; | ||
var resultData = this._findData(inputValue,this.opts.dataset); | ||
this.resultData = resultData; | ||
this.originValue = inputValue; | ||
if(resultData && resultData.length){ | ||
autoc.style.display = 'block'; | ||
var dataHtml = resultData.map(function(item){ | ||
return `<li class="auto-item"> | ||
<div class="auto-inner">${item.value}</div> | ||
</li>` | ||
}).join(''); | ||
autoc.querySelector('.autos').innerHTML = dataHtml; | ||
} | ||
else{ | ||
autoc.style.display = 'none'; | ||
} | ||
//重置位置 | ||
this.pos = -1; | ||
} | ||
AutoComplete.prototype._highlightAutoComplete = function(pos,bEnter){ | ||
var items = Array.prototype.slice.call(this.autoc.querySelectorAll('.auto-item')); | ||
@@ -111,3 +124,8 @@ items.forEach(function(item){ | ||
var activeItem = items[pos]; | ||
addClass(activeItem,'active'); | ||
if(bEnter){ | ||
this.autoc.style.display = 'none'; | ||
} | ||
else{ | ||
addClass(activeItem,'active'); | ||
} | ||
this.target.value = activeItem.querySelector('.auto-inner').innerHTML; | ||
@@ -114,0 +132,0 @@ } |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
33926
965
7