New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue2-autocomplete-js

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-autocomplete-js - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

719

dist/vue2-autocomplete.js

@@ -5,11 +5,714 @@ /*!

* ,
* ,Vue 2 Autocomplete @ Version 0.0.3,
* ,Vue 2 Autocomplete @ Version 0.1.0,
*
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Vue2Autocomplete=e():t.Vue2Autocomplete=e()}(this,function(){return function(t){function e(n){if(s[n])return s[n].exports;var o=s[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var s={};return e.m=t,e.c=s,e.p="../dist/",e(0)}([function(t,e,s){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}var o=s(2),i=n(o);t.exports=i.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),/*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
* Licensed Under MIT (http://opensource.org/licenses/MIT)
*
* Vue 2 Autocomplete @ Version 0.0.1
*
*/
e.default={props:{id:String,className:String,placeholder:String,initValue:{type:String,default:""},anchor:{type:String,required:!0},label:String,url:{type:String,required:!0},param:{type:String,default:"q"},customParams:Object,min:{type:Number,default:0},onInput:Function,onShow:Function,onBlur:Function,onHide:Function,onFocus:Function,onSelect:Function,onBeforeAjax:Function,onAjaxProgress:Function,onAjaxLoaded:Function},data:function(){return{showList:!1,type:"",json:[],focusList:""}},methods:{clearInput:function(){this.showList=!1,this.type="",this.json=[],this.focusList=""},cleanUp:function(t){return JSON.parse(JSON.stringify(t))},input:function(t){this.showList=!0,this.onInput?this.onInput(t):null,this.getData(t)},showAll:function(){this.json=[],this.getData(""),this.onShow?this.onShow():null,this.showList=!0},hideAll:function(t){var e=this;this.onBlur?this.onBlur(t):null,setTimeout(function(){e.onHide?e.onHide():null,e.showList=!1},250)},focus:function(t){this.focusList=0,this.onFocus?this.onFocus(t):null},mousemove:function(t){this.focusList=t},keydown:function(t){var e=t.keyCode;if(this.showList){switch(e){case 40:this.focusList++;break;case 38:this.focusList--;break;case 13:this.selectList(this.json[this.focusList]),this.showList=!1;break;case 27:this.showList=!1}var s=this.json.length-1;this.focusList=this.focusList>s?0:this.focusList<0?s:this.focusList}},activeClass:function(t){return{"focus-list":t==this.focusList}},selectList:function(t){var e=this.cleanUp(t);this.type=e[this.anchor],this.showList=!1,this.onSelect?this.onSelect(e):null},getData:function(t){var e=this,s=this;if(!(t.length<this.min)&&null!=this.url){this.onBeforeAjax?this.onBeforeAjax(t):null;var n=new XMLHttpRequest,o="";this.customParams&&Object.keys(this.customParams).forEach(function(t){o+="&"+t+"="+e.customParams[t]}),n.open("GET",this.url+"?"+this.param+"="+t+o,!0),n.send(),n.addEventListener("progress",function(t){t.lengthComputable&&(this.onAjaxProgress?this.onAjaxProgress(t):null)}),n.addEventListener("loadend",function(t){var e=JSON.parse(this.responseText);this.onAjaxLoaded?this.onAjaxLoaded(e):null,s.json=e})}},setValue:function(t){this.type=t}},created:function(){this.type=this.initValue?this.initValue:null}}},function(t,e,s){var n,o;n=s(1);var i=s(3);o=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(o=n=n.default),"function"==typeof o&&(o=o.options),o.render=i.render,o.staticRenderFns=i.staticRenderFns,t.exports=n},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{class:(t.className?t.className+"-wrapper ":"")+"autocomplete-wrapper"},[s("input",{directives:[{name:"model",rawName:"v-model",value:t.type,expression:"type"}],class:(t.className?t.className+"-input ":"")+"autocomplete-input",attrs:{type:"text",id:t.id,placeholder:t.placeholder,autocomplete:"off"},domProps:{value:t._s(t.type)},on:{input:[function(e){e.target.composing||(t.type=e.target.value)},function(e){t.input(t.type)}],dblclick:t.showAll,blur:t.hideAll,keydown:t.keydown,focus:t.focus}}),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.showList,expression:"showList"}],class:(t.className?t.className+"-list ":"")+"autocomplete transition autocomplete-list"},[s("ul",t._l(t.json,function(e,n){return s("li",{class:t.activeClass(n),attrs:{transition:"showAll"}},[s("a",{attrs:{href:"#"},on:{click:function(s){s.preventDefault(),t.selectList(e)},mousemove:function(e){t.mousemove(n)}}},[s("b",[t._v(t._s(e[t.anchor]))]),t._v(" "),s("span",[t._v(t._s(e[t.label]))])])])}))])])},staticRenderFns:[]}}])});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["Vue2Autocomplete"] = factory();
else
root["Vue2Autocomplete"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "../dist/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_vue_autocomplete_vue__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e47ae2be_hasScoped_false_node_modules_vue_loader_lib_selector_type_template_index_0_vue_autocomplete_vue__ = __webpack_require__(5);
var disposed = false
var normalizeComponent = __webpack_require__(4)
/* script */
/* template */
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_vue_autocomplete_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e47ae2be_hasScoped_false_node_modules_vue_loader_lib_selector_type_template_index_0_vue_autocomplete_vue__["a" /* default */],
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/js/components/vue-autocomplete.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] vue-autocomplete.vue: functional components are not supported with templates, they should use render functions.")}
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-e47ae2be", Component.options)
} else {
hotAPI.reload("data-v-e47ae2be", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["a"] = (Component.exports);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = function(originalModule) {
if(!originalModule.webpackPolyfill) {
var module = Object.create(originalModule);
// module.parent = undefined by default
if(!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
Object.defineProperty(module, "exports", {
enumerable: true,
});
module.webpackPolyfill = 1;
}
return module;
};
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
* Licensed Under MIT (http://opensource.org/licenses/MIT)
*
* Vue 2 Autocomplete @ Version 0.0.1
*
*/
/* harmony default export */ __webpack_exports__["a"] = ({
props: {
id: String,
className: String,
classes: {
type: Object,
default: function _default() {
return {
wrapper: false,
input: false,
list: false,
item: false
};
}
},
placeholder: String,
// Intial Value
initValue: {
type: String,
default: ""
},
// Manual List
options: Array,
// Filter After Get the data
filterByAnchor: {
type: Boolean,
default: true
},
// Anchor of list
anchor: {
type: String,
required: true
},
// Label of list
label: String,
// Debounce time
debounce: Number,
// ajax URL will be fetched
url: {
type: String,
required: true
},
// query param
param: {
type: String,
default: 'q'
},
// Custom Params
customParams: Object,
// minimum length
min: {
type: Number,
default: 0
},
// Process the result before retrieveng the result array.
process: Function,
// Callback
onInput: Function,
onShow: Function,
onBlur: Function,
onHide: Function,
onFocus: Function,
onSelect: Function,
onBeforeAjax: Function,
onAjaxProgress: Function,
onAjaxLoaded: Function,
onShouldGetData: Function
},
data: function data() {
return {
showList: false,
type: "",
json: [],
focusList: "",
debounceTask: undefined
};
},
watch: {
options: function options(newVal, oldVal) {
if (this.filterByAnchor) {
var type = this.type,
anchor = this.anchor;
var regex = new RegExp("" + type, 'i');
var filtered = newVal.filter(function (item) {
var found = item[anchor].search(regex) !== -1;
return found;
});
this.json = filtered;
} else {
this.json = newVal;
}
}
},
methods: {
getClassName: function getClassName(part) {
var classes = this.classes,
className = this.className;
if (classes[part]) return "" + classes[part];
return className ? className + "-" + part : '';
},
// Netralize Autocomplete
clearInput: function clearInput() {
this.showList = false;
this.type = "";
this.json = [];
this.focusList = "";
},
// Get the original data
cleanUp: function cleanUp(data) {
return JSON.parse(JSON.stringify(data));
},
/*==============================
INPUT EVENTS
=============================*/
handleInput: function handleInput(e) {
var _this = this;
var value = e.target.value;
this.showList = true;
// Callback Event
if (this.onInput) this.onInput(value);
// If Debounce
if (this.debounce) {
if (this.debounceTask !== undefined) clearTimeout(this.debounceTask);
this.debounceTask = setTimeout(function () {
return _this.getData(value);
}, this.debounce);
} else {
return this.getData(value);
}
},
handleKeyDown: function handleKeyDown(e) {
var key = e.keyCode;
// Disable when list isn't showing up
if (!this.showList) return;
// Key List
var DOWN = 40;
var UP = 38;
var ENTER = 13;
var ESC = 27;
switch (key) {
case DOWN:
this.focusList++;
break;
case UP:
this.focusList--;
break;
case ENTER:
this.selectList(this.json[this.focusList]);
this.showList = false;
break;
case ESC:
this.showList = false;
break;
}
var listLength = this.json.length - 1;
var outOfRangeBottom = this.focusList > listLength;
var outOfRangeTop = this.focusList < 0;
var topItemIndex = 0;
var bottomItemIndex = listLength;
var nextFocusList = this.focusList;
if (outOfRangeBottom) nextFocusList = topItemIndex;
if (outOfRangeTop) nextFocusList = bottomItemIndex;
this.focusList = nextFocusList;
},
setValue: function setValue(val) {
this.type = val;
},
/*==============================
LIST EVENTS
=============================*/
handleDoubleClick: function handleDoubleClick() {
this.json = [];
this.getData("");
// Callback Event
this.onShow ? this.onShow() : null;
this.showList = true;
},
handleBlur: function handleBlur(e) {
var _this2 = this;
// Callback Event
this.onBlur ? this.onBlur(e) : null;
setTimeout(function () {
// Callback Event
_this2.onHide ? _this2.onHide() : null;
_this2.showList = false;
}, 250);
},
handleFocus: function handleFocus(e) {
this.focusList = 0;
// Callback Event
this.onFocus ? this.onFocus(e) : null;
},
mousemove: function mousemove(i) {
this.focusList = i;
},
activeClass: function activeClass(i) {
var focusClass = i === this.focusList ? 'focus-list' : '';
return this.getClassName('input') + " " + focusClass;
},
selectList: function selectList(data) {
// Deep clone of the original object
var clean = this.cleanUp(data);
// Put the selected data to type (model)
this.type = clean[this.anchor];
// Hide List
this.showList = false;
// Callback Event
this.onSelect ? this.onSelect(clean) : null;
},
/*==============================
AJAX EVENTS
=============================*/
composeParams: function composeParams() {
var _this3 = this;
var params = "";
if (this.customParams) {
Object.keys(this.customParams).forEach(function (key) {
params += "&" + key + "=" + _this3.customParams[key];
});
}
return params;
},
doAjax: function doAjax(val) {
var _this4 = this;
// Callback Event
this.onBeforeAjax ? this.onBeforeAjax(val) : null;
// Compose Params
var params = this.composeParams();
// Init Ajax
var ajax = new XMLHttpRequest();
ajax.open('GET', this.url + "?" + this.param + "=" + val + params, true);
// Callback Event
ajax.addEventListener('progress', function (data) {
if (data.lengthComputable && _this4.onAjaxProgress) _this4.onAjaxProgress(data);
});
// On Done
ajax.addEventListener('loadend', function (e) {
var responseText = e.target.responseText;
var json = JSON.parse(responseText);
// Callback Event
_this4.onAjaxLoaded ? _this4.onAjaxLoaded(json) : null;
_this4.json = _this4.process ? _this4.process(json) : json;
});
// Send Ajax
ajax.send();
},
getData: function getData(value) {
if (value.length < this.min || !this.url) return;
if (this.onShouldGetData) this.manualGetData(value);else this.doAjax(value);
},
// Do Ajax Manually, so user can do whatever he want
manualGetData: function manualGetData(val) {
var _this5 = this;
var task = this.onShouldGetData(val);
if (task && task.then) {
return task.then(function (options) {
_this5.json = options;
});
}
}
},
created: function created() {
// Sync parent model with initValue Props
this.type = this.initValue ? this.initValue : null;
}
});
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_vue_autocomplete_vue__ = __webpack_require__(0);
module.exports = __WEBPACK_IMPORTED_MODULE_0__components_vue_autocomplete_vue__["a" /* default */];
/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(1)(module)))
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = injectStyles
}
if (hook) {
var functional = options.functional
var existing = functional
? options.render
: options.beforeCreate
if (!functional) {
// inject component registration as beforeCreate hook
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
} else {
// register for functioal component in vue file
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return existing(h, context)
}
}
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
class: ((_vm.getClassName('wrapper')) + " autocomplete-wrapper")
}, [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (_vm.type),
expression: "type"
}],
class: ((_vm.getClassName('input')) + " autocomplete-input"),
attrs: {
"type": "text",
"id": _vm.id,
"placeholder": _vm.placeholder,
"autocomplete": "off"
},
domProps: {
"value": (_vm.type)
},
on: {
"input": [function($event) {
if ($event.target.composing) { return; }
_vm.type = $event.target.value
}, _vm.handleInput],
"dblclick": _vm.handleDoubleClick,
"blur": _vm.handleBlur,
"keydown": _vm.handleKeyDown,
"focus": _vm.handleFocus
}
}), _vm._v(" "), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: (_vm.showList && _vm.json.length),
expression: "showList && json.length"
}],
class: ((_vm.getClassName('list')) + " autocomplete autocomplete-list")
}, [_c('ul', _vm._l((_vm.json), function(data, i) {
return _c('li', {
class: _vm.activeClass(i)
}, [_c('a', {
attrs: {
"href": "#"
},
on: {
"click": function($event) {
$event.preventDefault();
_vm.selectList(data)
},
"mousemove": function($event) {
_vm.mousemove(i)
}
}
}, [_c('b', [_vm._v(_vm._s(data[_vm.anchor]))]), _vm._v(" "), _c('span', [_vm._v(_vm._s(data[_vm.label]))])])])
}))])])
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api").rerender("data-v-e47ae2be", esExports)
}
}
/***/ })
/******/ ]);
});

70

package.json
{
"name": "vue2-autocomplete-js",
"version": "0.0.4",
"version": "0.1.0",
"description": "Autocomplete Component for Vue 2",
"main": "./dist/vue2-autocomplete.js",
"scripts": {
"dev": "webpack-dev-server --config ./webpack/webpack.config.js --inline --hot",
"build": "webpack --config ./webpack/webpack-prod.config.js -p",
"bundle": "webpack --config ./webpack/webpack-bundle.config.js -p"
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack/webpack.config.js --inline --hot",
"build": "cross-env NODE_ENV=production webpack --config ./webpack/webpack-prod.config.js -p",
"build:prod": "cross-env NODE_ENV=production webpack --config ./webpack/webpack-bundle.config.js -p",
"build:dist": "cross-env NODE_ENV=development webpack --config ./webpack/webpack-bundle.config.js",
"prepublish": "npm run build && npm run build:prod && npm run build:dist"
},

@@ -32,40 +34,30 @@ "repository": {

"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.3.17",
"babel-helper-vue-jsx-merge-props": "^2.0.1",
"babel-loader": "^6.2.0",
"babel-plugin-syntax-jsx": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-plugin-transform-vue-jsx": "^3.1.0",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.25.0",
"es6-promise": "^3.2.1",
"eslint": "^3.8.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-google": "^0.7.0",
"eslint-config-standard": "^6.2.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.4.1",
"eslint-plugin-standard": "^2.0.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "",
"vue-html-loader": "",
"vue-loader": "",
"vue-style-loader": "",
"vue-template-compiler": "^2.1.7",
"webpack": "^1.12.9",
"webpack-combine-loaders": "^2.0.0",
"webpack-dev-server": "^1.14.0"
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"cross-env": "^5.0.3",
"css-loader": "^0.28.0",
"es6-promise": "^4.1.0",
"extract-text-webpack-plugin": "^2.1.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cssmin": "^0.2.0",
"gulp-cssnano": "^2.1.2",
"gulp-group-css-media-queries": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.6.0",
"gulp-string-replace": "^0.4.0",
"jsx-control-statements": "^3.2.5",
"postcss-loader": "^2.0.6",
"style-loader": "^0.16.1",
"vue-loader": "^13.0.2",
"vue-template-compiler": "^2.4.2",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"vue": ""
"vue": "^2.4.2"
}
}

101

README.md

@@ -35,3 +35,3 @@ # Vue 2 Autocomplete

```html
<link rel="stylesheet" href="vue2-autocomplete/dist/style/vue2-autocomplete.css">
<link rel="stylesheet" href="vue2-autocomplete-js/dist/style/vue2-autocomplete.css">
```

@@ -95,21 +95,26 @@

label="writer"
:on-select="getData"
:onSelect="getData"
:customParams="{ token: 'dev' }"
id="custom id"
class-name="custom class name"
className="custom class name"
:classes="{ wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' }"
placeholder="placeholder"
:init-value="initial value"
:init-value="initial value"
:custom-params="{ token: 'dev' }"
:initValue="initial value"
:options="[]"
:min="3"
:debounce="2000"
:debounce="2000"
:on-input="callbackEvent"
:on-show="callbackEvent"
:on-blur="callbackEvent"
:on-hide="callbackEvent"
:on-focus="callbackEvent"
:on-select="callbackEvent"
:on-before-ajax="callbackEvent"
:on-ajax-progress="callbackEvent"
:on-ajax-loaded="callbackEvent">
:onShouldGetData="getData"
:onInput="callbackEvent"
:onShow="callbackEvent"
:onBlur="callbackEvent"
:onHide="callbackEvent"
:onFocus="callbackEvent"
:onSelect="callbackEvent"
:onBeforeAjax="callbackEvent"
:onAjaxProgress="callbackEvent"
:onAjaxLoaded="callbackEvent">
</autocomplete>

@@ -129,7 +134,7 @@

#### params (String)
name of the search parameter to query in Ajax call. default is `q=`
#### params (String: "q")
name of the search parameter to query in Ajax call. default is `q`
#### min (Number)
#### min (Number: 0)
Minimum input typed chars before performing the search query. default is `0`

@@ -145,3 +150,12 @@

#### options (Array)
Manual pass an Array of list options to the autocomplete.
#### filterByAnchor (Boolean: true)
When you're using options props, you can have autocomplete to filter your data. Or you can just show your data directly without any filter from autocomplete. The options will be filtered by anchor and it according to the user input.
#### debounce (Number)
Delay time before do the ajax for the data
#### placeholder (String)

@@ -153,2 +167,5 @@ Placeholder for input

#### classes (Object)
Spesific custom class for each part. available: wrapper, input, list, and item
#### id (String)

@@ -189,3 +206,51 @@ Custom id name for autocomplete component

#### onShouldGetData (Function)
Manually Process the whole ajax process. If it's a Promise, it should resolve the options for the list of autocomplete. If it isn't a Promise, you can manually pass the options to the props of autocomplete
```html
<autocomplete
anchor="formatted_address"
label="formatted_address"
:onShouldGetData="getData"
>
</autocomplete>
```
```javascript
methods: {
promise(value) {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest();
ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);
// On Done
ajax.addEventListener('loadend', (e) => {
const { responseText } = e.target
let response = JSON.parse(responseText);
// The options to pass in the autocomplete
resolve(response.results)
});
ajax.send();
})
},
nonPromise() {
getData(value) {
let ajax = new XMLHttpRequest();
ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);
// On Done
ajax.addEventListener('loadend', (e) => {
const { responseText } = e.target
let response = JSON.parse(responseText);
// The options to pass in the autocomplete props
this.options = response.results;
});
ajax.send();
},
}
}
```
#### process (Function)
Process the result before retrieveng the result array.
## Methods

@@ -192,0 +257,0 @@ You can do some methods by accessing the component via javascript.

29

webpack/webpack-bundle.config.js
var webpack = require('webpack');
var combineLoaders = require('webpack-combine-loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
require('es6-promise').polyfill();

@@ -31,3 +29,3 @@

test: /\.vue$/,
loader: 'vue'
loader: 'vue-loader'
},

@@ -38,28 +36,9 @@

exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ["es2015"],
plugins: ["transform-object-rest-spread","transform-vue-jsx"]
}
loader: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
},
{
test: /\.css$/,
loaders: ['style','css']
},
{
test: /\.json$/,
loader: 'json'
},
use: ['style-loader','css-loader']
}
]

@@ -66,0 +45,0 @@ },

29

webpack/webpack-prod.config.js
var webpack = require('webpack');
var combineLoaders = require('webpack-combine-loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
require('es6-promise').polyfill();

@@ -26,3 +24,3 @@

test: /\.vue$/,
loader: 'vue'
loader: 'vue-loader'
},

@@ -33,28 +31,9 @@

exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ["es2015"],
plugins: ["transform-object-rest-spread","transform-vue-jsx"]
}
loader: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
},
{
test: /\.css$/,
loaders: ['style','css']
},
{
test: /\.json$/,
loader: 'json'
},
use: ['style-loader','css-loader']
}
]

@@ -61,0 +40,0 @@ },

10

webpack/webpack.config.js

@@ -19,3 +19,3 @@

test: /\.vue$/,
loader: 'vue'
loader: 'vue-loader'
},

@@ -25,11 +25,7 @@ {

exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ["es2015"],
plugins: ["transform-object-rest-spread","transform-vue-jsx"]
}
loader: 'babel-loader',
},
{
test: /\.css$/,
loaders: ['style','css']
use: ['style-loader','css-loader']
}

@@ -36,0 +32,0 @@ ]

.babelrc

Sorry, the diff of this file is not supported yet

build/build.js

Sorry, the diff of this file is too big to display

dist/style/vue2-autocomplete.css

Sorry, the diff of this file is not supported yet

src/js/components/app.vue

Sorry, the diff of this file is not supported yet

src/js/components/vue-autocomplete.vue

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc