This question already has an answer here:
- How can I bind a text which contains url as html 1 answer
My colleague Patrick & I currently converting an autocomplete component from Web UI to Polymer.dart.In Web UI we provided a HTML rendered list to the autocomplete in order to give a programmer the opportunity to style the results. Based on the input's value we filtered the list and displayed the matching results.
What would you recommend to achieve the same behaviour in Polymer.dart? Should we approach this completly differently?
Old Web UI code:
<template iterate="entry in filteredEntries">
<li class="b-autocomplete-results-li">{{ entry.sanitizedHtml }}</li>
</template>
Class for one entry:
class AutocompleteEntry {
final String id;
final String searchableText;
final Element _element;
AutocompleteEntry(this.id, this.searchableText, this._element) {
// remove the data-id and data-text since we don't need them in the html
_element.dataset.remove('text');
_element.dataset.remove('id');
}
get sanitizedHtml {
var validator = new NodeValidatorBuilder()..allowHtml5();
var documentFragment = document.body.createFragment(_element.outerHtml, validator: validator);
return documentFragment;
}
}