Version 3.0.0 => Release History for details

README.md

@@ -19,7 +19,7 @@
 <br>
 <br>
 
-> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v2.1**
+> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v3.0**
 
 autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind.
 
@@ -52,13 +52,13 @@ git clone https://github.com/TarekRaafat/autoComplete.js.git
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.1.0/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@3.0.0/dist/css/autoComplete.min.css">
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.1.0/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@3.0.0/dist/js/autoComplete.min.js"></script>
 ```
 
 -   <a href="https://www.npmjs.com/package/@tarekraafat/autocomplete.js">npm</a> install `(Node Package Manager)`

dist/js/autoComplete.js

@@ -44,14 +44,14 @@
   var highlight = function highlight(value) {
     return "<span class=".concat(select.highlight, ">").concat(value, "</span>");
   };
-  var addResultsToList = function addResultsToList(dataSrc, dataKey) {
+  var addResultsToList = function addResultsToList(dataSrc, dataKey, callback) {
     dataSrc.forEach(function (event, record) {
       var result = document.createElement("li");
       var resultValue = dataSrc[record].source[dataKey] || dataSrc[record].source;
       result.setAttribute(dataAttribute, resultValue);
       result.setAttribute("class", select.result);
       result.setAttribute("tabindex", "1");
-      result.innerHTML = dataSrc[record].match || dataSrc[record];
+      result.innerHTML = callback ? callback(event, result) : event.match || event;
       resultsList.appendChild(result);
     });
   };
@@ -127,12 +127,13 @@
       };
       this.searchEngine = config.searchEngine === "loose" ? "loose" : "strict";
       this.threshold = config.threshold || 0;
-      this.renderResults = autoCompleteView.createResultsList({
-        destination: config.renderResults ? config.renderResults.destination : autoCompleteView.getInput(this.selector),
-        position: config.renderResults ? config.renderResults.position : "afterend"
+      this.resultsList = autoCompleteView.createResultsList({
+        destination: config.resultsList ? config.resultsList.destination : autoCompleteView.getInput(this.selector),
+        position: config.resultsList ? config.resultsList.position : "afterend"
       });
       this.placeHolder = config.placeHolder;
       this.maxResults = config.maxResults || 5;
+      this.resultItem = config.resultItem;
       this.highlight = config.highlight || false;
       this.onSelection = config.onSelection;
       this.init();
@@ -183,7 +184,7 @@
           }
         });
         var list = resList.slice(0, this.maxResults);
-        autoCompleteView.addResultsToList(list, this.data.key);
+        autoCompleteView.addResultsToList(list, this.data.key, this.resultItem);
         autoCompleteView.navigation(this.selector);
         return list;
       }

dist/js/index.js

@@ -18,10 +18,13 @@ const autoCompletejs = new autoComplete({
 	searchEngine: "strict",
 	highlight: true,
 	maxResults: Infinity,
-	renderResults: {
+	resultsList: {
 		destination: document.querySelector("#autoComplete"),
 		position: "afterend"
 	},
+	resultItem: (data, source) => {
+		return `${data.match}`;
+	},
 	onSelection: feedback => {
 		const selection = feedback.selection.food;
 		// Render selected choice to selection div