vue2-autocomplete-js - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/vue2-autocomplete.js

@@ -5,3 +5,3 @@ /*!
  * ,
- * ,Vue 2 Autocomplete @ Version 0.1.0,
+ * ,Vue 2 Autocomplete @ Version 0.2.0,
  * 
@@ -214,2 +214,6 @@ */
 //
+//
+//
+//
+//
 
@@ -228,2 +232,3 @@
     id: String,
+    name: String,
     className: String,
@@ -282,5 +287,13 @@ classes: {
 
+    encodeParams: {
+      type: Boolean,
+      default: true
+    },
+
     // Custom Params
     customParams: Object,
 
+    // Custom Headers
+    customHeaders: Object,
+
     // minimum length
@@ -292,2 +305,5 @@ min: {
 
+    // Create a custom template from data.
+    onShouldRenderChild: Function,
+
     // Process the result before retrieveng the result array.
@@ -396,10 +412,14 @@ process: Function,
 
+      // Prevent Default for Prevent Cursor Move & Form Submit
       switch (key) {
         case DOWN:
+          e.preventDefault();
           this.focusList++;
           break;
         case UP:
+          e.preventDefault();
           this.focusList--;
           break;
         case ENTER:
+          e.preventDefault();
           this.selectList(this.json[this.focusList]);
@@ -473,2 +493,9 @@ this.showList = false;
     },
+    deepValue: function deepValue(obj, path) {
+      var arrayPath = path.split('.');
+      for (var i = 0; i < arrayPath.length; i++) {
+        obj = obj[arrayPath[i]];
+      }
+      return obj;
+    },
 
@@ -479,9 +506,13 @@
     =============================*/
-    composeParams: function composeParams() {
+
+    composeParams: function composeParams(val) {
       var _this3 = this;
 
-      var params = "";
+      var encode = function encode(val) {
+        return _this3.encodeParams ? encodeURIComponent(val) : val;
+      };
+      var params = this.param + "=" + encode(val);
       if (this.customParams) {
         Object.keys(this.customParams).forEach(function (key) {
-          params += "&" + key + "=" + _this3.customParams[key];
+          params += "&" + key + "=" + encode(_this3.customParams[key]);
         });
@@ -491,15 +522,25 @@ }
     },
-    doAjax: function doAjax(val) {
+    composeHeader: function composeHeader(ajax) {
       var _this4 = this;
 
+      if (this.customHeaders) {
+        Object.keys(this.customHeaders).forEach(function (key) {
+          ajax.setRequestHeader(key, _this4.customHeaders[key]);
+        });
+      }
+    },
+    doAjax: function doAjax(val) {
+      var _this5 = this;
+
       // Callback Event
       this.onBeforeAjax ? this.onBeforeAjax(val) : null;
       // Compose Params
-      var params = this.composeParams();
+      var params = this.composeParams(val);
       // Init Ajax
       var ajax = new XMLHttpRequest();
-      ajax.open('GET', this.url + "?" + this.param + "=" + val + params, true);
+      ajax.open('GET', this.url + "?" + params, true);
+      this.composeHeader(ajax);
       // Callback Event
       ajax.addEventListener('progress', function (data) {
-        if (data.lengthComputable && _this4.onAjaxProgress) _this4.onAjaxProgress(data);
+        if (data.lengthComputable && _this5.onAjaxProgress) _this5.onAjaxProgress(data);
       });
@@ -512,4 +553,4 @@ // On Done
         // Callback Event
-        _this4.onAjaxLoaded ? _this4.onAjaxLoaded(json) : null;
-        _this4.json = _this4.process ? _this4.process(json) : json;
+        _this5.onAjaxLoaded ? _this5.onAjaxLoaded(json) : null;
+        _this5.json = _this5.process ? _this5.process(json) : json;
       });
@@ -527,3 +568,3 @@ // Send Ajax
     manualGetData: function manualGetData(val) {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -533,3 +574,3 @@ var task = this.onShouldGetData(val);
         return task.then(function (options) {
-          _this5.json = options;
+          _this6.json = options;
         });
@@ -674,2 +715,3 @@ }
       "placeholder": _vm.placeholder,
+      "name": _vm.name,
       "autocomplete": "off"
@@ -714,3 +756,11 @@ },
       }
-    }, [_c('b', [_vm._v(_vm._s(data[_vm.anchor]))]), _vm._v(" "), _c('span', [_vm._v(_vm._s(data[_vm.label]))])])])
+    }, [(_vm.onShouldRenderChild) ? _c('div', {
+      domProps: {
+        "innerHTML": _vm._s(_vm.onShouldRenderChild(data))
+      }
+    }) : _vm._e(), _vm._v(" "), (!_vm.onShouldRenderChild) ? _c('div', [_c('b', {
+      staticClass: "autocomplete-anchor-text"
+    }, [_vm._v(_vm._s(_vm.deepValue(data, _vm.anchor)))]), _vm._v(" "), _c('span', {
+      staticClass: "autocomplete-anchor-label"
+    }, [_vm._v(_vm._s(_vm.deepValue(data, _vm.label)))])]) : _vm._e()])])
   }))])])
@@ -717,0 +767,0 @@ }

package.json

 {
   "name": "vue2-autocomplete-js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Autocomplete Component for Vue 2",
@@ -5,0 +5,0 @@ "main": "./dist/vue2-autocomplete.js",

README.md

 # Vue 2 Autocomplete
-Autocomplete Component For [Vue 2](http://vuejs.org). It's based on [vue-autocomplete](https://github.com/BosNaufal/vue-autocomplete)
+Autocomplete Component For [Vue 2](http://vuejs.org). It's based on [vue-autocomplete](https://github.com/BosNaufal/vue-autocomplete). [LIVE DEMO HERE!](https://rawgit.com/BosNaufal/vue2-autocomplete/master/index.html)
 
@@ -41,3 +41,3 @@ <p align="center">
 ```javascript
-require('vue2-autocomplete-js/style/vue2-autocomplete.css')
+require('vue2-autocomplete-js/dist/style/vue2-autocomplete.css')
 ```
@@ -78,3 +78,3 @@
     methods: {
-      getFiles(obj){
+      getData(obj){
         console.log(obj);
@@ -88,3 +88,3 @@ }
 
-Full Props
+Available Props
 ```html
@@ -99,3 +99,5 @@ <template>
     :customParams="{ token: 'dev' }"
+    :customHeaders="{ Authorization: 'bearer abc123' }"
 
+
     id="custom id"
@@ -107,6 +109,8 @@ className="custom class name"
 
+
     :options="[]"
     :min="3"
     :debounce="2000"
-    :debounce="2000"
+    :filterByAnchor="true"
+    :encodeParams="true"
 
@@ -122,3 +126,5 @@ :onShouldGetData="getData"
     :onAjaxProgress="callbackEvent"
-    :onAjaxLoaded="callbackEvent">
+    :onAjaxLoaded="callbackEvent"
+    :onShouldRenderChild="renderChild"
+  >
   </autocomplete>
@@ -137,13 +143,10 @@
 
-
-#### params (String: "q")
+#### param (String: "q")
 name of the search parameter to query in Ajax call. default is `q`
 
-
 #### min (Number: 0)
 Minimum input typed chars before performing the search query. default is `0`
 
-
 #### anchor* (String)
-It's a object property name that passed by your API. It's used for Anchor in suggestions list. Example `anchor="name"` will get the name property of your JSON object. Like ("Bambang", "Sukijan", "Bejo") in the demo above.
+It's a object property path that used for Anchor in suggestions list. Example `anchor="name"` will get the name property of your JSON object. Like ("Bambang", "Sukijan", "Bejo") in the demo above. Or you can reach the deep value of your object. Like `anchor="geometry.location.lat"`
 
@@ -160,2 +163,5 @@
 
+#### encodeParams (Boolean: true)
+Autocomplete will ```encodeURIComponent``` all your params before ajax send, When this props sets to ```true```. Default is ```true``` [#35](https://github.com/BosNaufal/vue2-autocomplete/pull/35)
+
 #### debounce (Number)
@@ -177,4 +183,12 @@ Delay time before do the ajax for the data
 
+#### debounce (number)
+Number of milliseconds the user should stop typing for before the request is sent. Default is 0, meaning all requests are sent immediately.
 
+#### process (Function)
+Function to process the API result with. Should return an array of entries or an object whose properties can be enumerated.
 
+#### template (Function)
+Function to process each result with. Takes the type of an API reply element and should return HTML data.
+
+
 ## Callback Events
@@ -255,6 +269,27 @@ You can make a callback event via props.
 #### process (Function)
-Process the result before retrieveng the result array.
+Process the result before retrieveng the result array. You can shape your data here before it's passed to the autocomplete
 
+#### onShouldRenderChild (Function)
+Wanna use custom template for the list? Now, you can do it!
+```html
+<autocomplete
+  anchor="formatted_address"
+  label="formatted_address"
+  :onShouldRenderChild="renderChild"
+>
+</autocomplete>
+```
+```javascript
+methods: {
+  renderChild(data) {
+    return `
+      <img src="${data.src}" />
+      <span>${data.something}</span>
+    `
+  },
+}
+```
 
 
+
 ## Methods
@@ -261,0 +296,0 @@ You can do some methods by accessing the component via javascript.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

701728

increased by0.85%

Lines of code

870

increased by5.97%

Number of lines in readme file

307

increased by12.87%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

18

decreased by-5.26%

No dependency changes