wip towards non innerHTML based highlight mechanism

mostly working--jquery seems to doublset placeholder
highlight from parent DDL not working

src/strand-autocomplete/strand-autocomplete.html

@@ -38,9 +38,11 @@
 				<div id="list">
 					<template id="domRepeat" is="dom-repeat" items="{{_searchData}}">
 						<strand-list-item 
-							value$="{{item.value}}" 
-							selected$={{item.selected}}
-							highlighted$="{{item.highlighted}}">{{item.name}}</strand-list-item>
+							value="{{item.value}}" 
+							name="{{item.name}}"
+							selected="{{item.selected}}"
+							highlight="[[_name]]"
+							highlighted="{{item.highlighted}}"></strand-list-item>
 					</template>
 				</div>
 			</div>

src/strand-dropdown/doc.json

@@ -100,6 +100,14 @@
 			"optional":true,
 			"default":"none",
 			"reflect":true
+		},
+		{
+			"name":"highlight",
+			"type":"String",
+			"description":"Instructs the list items to show the passed string as highlighted text",
+			"optional":true,
+			"default":"''",
+			"reflect":false
 		}
 	],
 	"methods": [

src/strand-dropdown/strand-dropdown.html

@@ -50,14 +50,16 @@
 					<strand-item-recycler
 						id="itemRecycler"
 						data="{{data}}"
+						scope="{{scope}}"
 						hidden$="{{!_hideInsertionPoints(data)}}"
 						index="{{index}}">
 						<template preserve-content>
 							<strand-list-item
 								value$="{{model.value}}"
 								selected$="{{model.selected}}"
-								highlight$="{{model.highlight}}"
-								highlighted$="{{model.highlighted}}">{{model.name}}</strand-list-item>
+								highlight$="{{scope.highlight}}"
+								name="{{model.name}}"
+								highlighted$="{{model.highlighted}}"></strand-list-item>
 						</template>
 					</strand-item-recycler>
 				</div>

src/strand-dropdown/strand-dropdown.js

@@ -91,6 +91,17 @@
 				notify: true,
 				observer: '_valueChanged'
 			},
+			scope: {
+				type: Object,
+				notify: true,
+				value: function() {
+					return this;
+				}
+			},
+			highlight: {
+				type:String,
+				notify: true
+			},
 			maxItems: {
 				type: Number,
 				observer: '_maxItemsChanged'
@@ -194,7 +205,7 @@
 		},
 
 		_getValueFromDom: function(node) {
-			return node.getAttribute('value') || node.textContent.trim();
+			return node.getAttribute('value') || Polymer.dom(node).textContent.trim();
 		},
 
 		_getDataIndexFromDom: function(value) {

src/strand-list-item/strand-list-item.html

@@ -13,8 +13,15 @@
 
 <dom-module id="strand-list-item">
 	<link rel="import" type="css" href="strand-list-item.css"/>
-	<template>
-		<content></content>
+	<template strip-whitespace>
+		<div style="display:none">
+			<content id="content"></content>
+		</div>
+		<template is="dom-repeat" strip-whitespace items="{{_textItems}}">
+			<template is="dom-if" if="{{item.highlight}}"><mark>{{item.text}}</mark></template>
+			<template is="dom-if" if="{{!item.highlight}}">{{item.text}}</template>
+		</template>
+		</template>
 	</template>
 </dom-module>
 <script src="strand-list-item.js"></script>

src/strand-list-item/strand-list-item.js

@@ -51,6 +51,11 @@
 			value: {
 				type: String,
 				value: false
+			},
+			name: {
+				type:String,
+				value: '',
+				observer:'_nameChanged'
 			}
 		},
 
@@ -61,6 +66,12 @@
 			"mouseover":"_updateTitleHandler"
 		},
 
+		ready: function() {
+			if (!this.name) {
+				this.name = this.getEffectiveChildNodes().map(function(n) { return n.textContent }).join('');
+			}
+		},
+
 		attached: function () {
 			this.debounce("update-title",this.updateTitle,0);
 		},
@@ -69,17 +80,44 @@
 			this.debounce("update-title",this.updateTitle,0);
 		},
 
+		_nameChanged: function() {
+			this.debounce('update-name', this._updateTextItems, 0);
+		},
+
 		_highlightChanged: function() {
-			if (this.highlight && this.highlight.length > 0) {
-				var s = this.innerText;
-				Polymer.dom(this).innerHTML = s.replace(new RegExp(this.highlight,"ig"),function(orig) {
-					return '<span class="strand-list-item highlight">'+orig+'</span>';
-				},'ig');
-			} else if (this.innerText && this.innerText.trim()){
-				Polymer.dom(this).innerHTML = this.innerText.trim(); //strip any formatting
+			// var s = Polymer.dom(this).textContent;
+			// if (this.highlight && this.highlight.length > 0 && s) {
+			// 	Polymer.dom(this).innerHTML = s.replace(new RegExp(this.highlight,"ig"),function(orig) {
+			// 		return '<mark class="strand-list-item highlight">'+orig+'</mark>';
+			// 	},'ig');
+			// } 
+			// else if (this.innerText && this.innerText.trim()){
+			// 	Polymer.dom(this).innerHTML = this.innerText.trim(); //strip any formatting
+			// }
+			this.debounce('update-name', this._updateTextItems, 0);
+		},
+
+		_updateTextItems: function() {
+			if (!this.name) return;
+			if (this.highlight) {
+				var reg = new RegExp(this.highlight.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'ig');
+				var stamp = '\uE000';
+				this._textItems = this.name.replace(reg, function(o) { 
+					return stamp + o + stamp;
+				})
+				.split(stamp)
+				.map(function(input, i) {
+					return {
+						highlight: i%2!=0,
+						text: input
+					};
+				});
+			} else {
+				this._textItems = [{text:this.name}];
 			}
 		},
 
+
 		updateTitle: function() {
 			var m = StrandLib.Measure;
 			var computed = m.textWidth(this, this.textContent);

src/strand-list-item/strand-list-item.scss

@@ -64,3 +64,8 @@
 :host > ::content .highlight {
 	background: $color-E13;
 }
+
+mark {
+	color: $color-A2;
+	background: $color-E13;
+}