Key/value support in autocomplete like select/option

scozv · Jul 19, 2015 · e381632 · e381632
1 parent 1f5bb2b
commit e381632
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@
 
 autocomplete.js is a Javascript project with purpose to propose an autocomplete, fast, lite and without dependency.
 
+This branch `plus` is only the experimental commits for some new ideas. 
+Pull requests will be sent from the `master` branch.
+
+
 ###Documentation
 
 The documentation is available [here](http://autocomplete-js.com).
@@ -16,4 +20,4 @@ Lite, Open, made by a developer for developers. Help me and contributed :)
 
 ###Thanks
 
-Thank you to [Demonixis](https://github.com/demonixis) for the Javascript advices.
+Thank you to [Demonixis](https://github.com/demonixis) for the Javascript advices.
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -13,6 +13,9 @@ var AutoComplete = (function () {
         if (this) {
             var i,
                 self = this,
+                // this attribute of li will store key of each json item
+                // like the value in select/option
+                acKeyIndentifier = 'data-autocomplete-item-key',
                 defaultParams = {
                     limit:     0,
                     method:    "GET",
@@ -22,7 +25,10 @@ var AutoComplete = (function () {
                         "Content-type": "application/x-www-form-urlencoded"
                     },
                     select: function(input, item) {
-                        attr(input, {"data-autocomplete-old-value": input.value = attr(item, "data-autocomplete-value", item.innerHTML)});
+                        var extraAttrs = {};
+                        extraAttrs = {"data-autocomplete-old-value": input.value = attr(item, "data-autocomplete-value", item.innerHTML)};
+                        extraAttrs[acKeyIndentifier] = attr(item, acKeyIndentifier);
+                        attr(input, extraAttrs);
                     },
                     open: function(input, result) {
                         var self = this;
@@ -32,15 +38,28 @@ var AutoComplete = (function () {
                             };
                         });
                     },
+                    postJsonItemValue: function(x){
+                        // for each json item, how do we stringfy it as the li.innnerText
+                        return x;
+                    },
+                    postJsonItemKey: function(x){
+                        // for each json item, how do we stringfy it as the li.value
+                        return x;
+                    },
                     post: function(result, response, custParams) {
                         try {
                             response = JSON.parse(response);
                             var createLi = function() {return domCreate("li");},
                                 autoReverse = function(param, limit) {
                                     return (limit < 0) ? param.reverse() : param;
                                 },
-                                addLi = function(ul, li, response) {
+                                addLi = function(ul, li, response, key) {
                                     li.innerHTML = response;
+                                    if (key){
+                                        var extraAttrs = {};
+                                        extraAttrs[acKeyIndentifier] = key;
+                                        attr(li, extraAttrs);
+                                    }
                                     ul.appendChild(li);
                                     return createLi();
                                 },
@@ -60,7 +79,7 @@ var AutoComplete = (function () {
                                     response = autoReverse(response, limit);
 
                                     for (; i < length && (i < Math.abs(limit) || !limit); i++) {
-                                        li = addLi(ul, li, response[i]);
+                                        li = addLi(ul, li, custParams.postJsonItemValue(response[i]), custParams.postJsonItemKey(response[i]));
                                     }
                                 } else {
                                     //If the response is an object or an array and that the response is empty, so this script is here, for the message no response.