Version 7.0.3 => Release History for details

README.md

@@ -52,13 +52,13 @@ git clone https://github.com/TarekRaafat/autoComplete.js.git
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/css/autoComplete.min.css">
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/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

@@ -26,7 +26,7 @@
     return Constructor;
   }
 
-  var dataAttribute = "data-result";
+  var dataAttribute = "data-id";
   var select = {
     resultsList: "autoComplete_results_list",
     result: "autoComplete_result",
@@ -50,8 +50,8 @@
   var addResultsToList = function addResultsToList(resultsList, dataSrc, resultItem) {
     dataSrc.forEach(function (event, record) {
       var result = document.createElement(resultItem.element);
-      var resultValue = dataSrc[record].value[event.key] || dataSrc[record].value;
-      result.setAttribute(dataAttribute, resultValue);
+      var resultIndex = dataSrc[record].index;
+      result.setAttribute(dataAttribute, resultIndex);
       result.setAttribute("class", select.result);
       result.setAttribute("tabindex", "1");
       resultItem.content ? resultItem.content(event, result) : result.innerHTML = event.match || event;
@@ -98,8 +98,7 @@
                 return record.value;
               }),
               selection: resultsValues.list.find(function (value) {
-                var resValue = value.value[value.key] || value.value;
-                return resValue === event.target.closest(".".concat(select.result)).getAttribute(dataAttribute);
+                return value.index === Number(event.target.closest(".".concat(select.result)).getAttribute(dataAttribute));
               })
             });
             clearResults(resultsList);

docs/README.md

@@ -67,13 +67,13 @@ npm run build
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/css/autoComplete.min.css">
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/js/autoComplete.min.js"></script>
 ```
 
 -   <img src="./img/logos/html_logo.png" alt="HTML Logo" width="40px"> HTML Local load
@@ -121,7 +121,7 @@ const autoComplete = require("@tarekraafat/autocomplete.js/dist/js/autoComplete"
 ```html
 <link rel="stylesheet" href="./css/autoComplete.css">
 OR
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/css/autoComplete.min.css">
 ```
 
 2.  Assign the default `id` value `"autoComplete"` to the desired input field or use any custom `id/class` and configure the API selector accordingly in `Step 4`
@@ -136,7 +136,7 @@ OR
 <script src="./js/autoComplete.min.js"></script>
 <script src="./js/index.js"></script>
 OR
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/js/autoComplete.min.js"></script>
 <script src="./js/index.js"></script>
 ```
 

docs/demo/index.html

@@ -54,7 +54,7 @@
 		<meta name="msapplication-TileColor" content="#ffffff">
 		<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
 		<meta name="theme-color" content="#ffffff">
-		<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/css/autoComplete.min.css">
+		<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/css/autoComplete.min.css">
 		<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
 		<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
 	</head>
@@ -119,7 +119,7 @@ <h4>mode</h4>
 				</div>
 			</footer>
 		</div>
-		<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].2/dist/js/autoComplete.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].3/dist/js/autoComplete.min.js"></script>
 		<script src="./js/index.js"></script>
 	</body>
 

docs/releases.md

@@ -26,7 +26,10 @@ Release flags:
 
 ## Release Notes
 
-- v7.0.2 :sparkles:
+- v7.0.3 :sparkles:
+  - Duplicate values selection bug fix (Thanks 👍 @plungerman)
+
+- v7.0.2
   - Data Promise bug fix (Thanks 👍 @braco)
   - Remote API duplicate calls fix (Thanks 👍 @srinivas025, @argebynogame)
   - `trigger.condition` enhancement (Thanks 👍 @sakuraineed)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarekraafat/autocomplete.js",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Simple autocomplete pure vanilla Javascript library.",
   "main": "dist/js/autoComplete.js",
   "browser": "dist/js/autoComplete.min.js",