Support list with separate label/value via <datalist> or <ul>

LeaVerou · Mar 12, 2016 · 539fbf5 · 539fbf5
1 parent 0571468
commit 539fbf5
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/awesomplete.js b/awesomplete.js
@@ -118,9 +118,18 @@ _.prototype = {
 			list = $(list);
 
 			if (list && list.children) {
-				this._list = slice.apply(list.children).map(function (el) {
-					return el.textContent.trim();
+				var items = [];
+				slice.apply(list.children).forEach(function (el) {
+					if (!el.disabled) {
+						var text = el.textContent.trim();
+						var value = el.value || text;
+						var label = el.label || text;
+						if (value !== "") {
+							items.push({ label: label, value: value });
+						}
+					}
 				});
+				this._list = items;
 			}
 		}
 
@@ -282,7 +291,7 @@ function Suggestion(data) {
 	  ? { label: data[0], value: data[1] }
 	  : typeof data === "object" && "label" in data && "value" in data ? data : { label: data, value: data };
 
-	this.label = o.label;
+	this.label = o.label || o.value;
 	this.value = o.value;
 }
 Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), "length", {

diff --git a/test/init/listSpec.js b/test/init/listSpec.js
@@ -23,12 +23,20 @@ describe("Awesomplete list", function () {
 
 		it("assigns from element specified by selector", function () {
 			this.subject.list = "#data-list";
-			expect(this.subject._list).toEqual([ "With", "Data", "List" ]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "Data", value: "Data" },
+				{ label: "List", value: "List" }
+			]);
 		});
 
 		it("assigns from element", function () {
 			this.subject.list = $("#data-list");
-			expect(this.subject._list).toEqual([ "With", "Data", "List" ]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "Data", value: "Data" },
+				{ label: "List", value: "List" }
+			]);
 		});
 
 		it("does not assigns from not found list", function () {
@@ -68,12 +76,20 @@ describe("Awesomplete list", function () {
 
 		it("assigns from element specified by selector", function () {
 			this.options = { list: "#data-list" };
-			expect(this.subject._list).toEqual([ "With", "Data", "List" ]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "Data", value: "Data" },
+				{ label: "List", value: "List" }
+			]);
 		});
 
 		it("assigns from list specified by element", function () {
 			this.options = { list: $("#data-list") };
-			expect(this.subject._list).toEqual([ "With", "Data", "List" ]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "Data", value: "Data" },
+				{ label: "List", value: "List" }
+			]);
 		});
 	});
 
@@ -85,14 +101,21 @@ describe("Awesomplete list", function () {
 
 		it("assigns from element referenced by selector", function () {
 			this.element = "#with-data-list";
-			expect(this.subject._list).toEqual(["With", "Data", "List"]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "Data", value: "Data" },
+				{ label: "List", value: "List" }
+			]);
 		});
 	});
 
 	describe("list html attribute", function () {
 		it("assigns from element referenced by id", function () {
 			this.element = "#with-list";
-			expect(this.subject._list).toEqual(["With", "List"]);
+			expect(this.subject._list).toEqual([
+				{ label: "With", value: "With" },
+				{ label: "List", value: "List" }
+			]);
 		});
 	});
 });