highlight.html

<base href="https://polygit.org/vaadin-combo-box+vaadin+v1.3.0/polymer+polymer+v1.7.0/components/">

<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-item/all-imports.html">

<dom-module id="regex-highlighter">
  <template>
    <style>
      p {
        font-size: 0;
      }
      
      p > * {
        font-size: 14px;
      }
    
      [matches] {
        font-weight: bold;
        color: var(--default-primary-color);
      }
    </style>
    <p>
      <template is="dom-repeat" items="[[_items]]">
        <span matches$="[[_matches(regex, item)]]">[[item]]</span>
      </template>
    </p>
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'regex-highlighter',
        
        properties: {
          regex: String,
          string: String,
          caseSensitive: {
            type: Boolean,
            value: function() {
              return false;
            }
          },
          
          _items: Array
        },
        
        observers: ['_regexChanged(regex, string)'],
        
        _matches: function(regex, item) {
          try {
	          return new RegExp(regex, this.caseSensitive ? '' : 'i').test(item);
          } catch (err) {
            return false;
          }
        },
        
        _regexChanged: function(regex, string) {
          try {
          	this._items = string.split(new RegExp(regex, this.caseSensitive ? '' : 'i'));
          } catch (err) {
            this._items = [string];
          }
        }
      });
    });
  </script>
</dom-module>

<style is="custom-style">
  vaadin-combo-box {
    width: 300px;
  }
  paper-icon-item {
    margin: -13px -16px;
  }
  paper-icon-item div:not([secondary]) {
    text-transform: capitalize;
  }
  paper-icon-item img {
    border-radius: 50%;
  }
</style>

<template is="dom-bind">
  <iron-ajax url="https://randomuser.me/api?results=100&inc=name,email,picture" last-response="{{response}}" auto></iron-ajax>
  <vaadin-combo-box items="[[response.results]]" filter="{{filter}}" item-value-path="email" item-label-path="email">
    <template>
            <paper-icon-item>
        <img src="[[item.picture.thumbnail]]" item-icon>
        <paper-item-body two-line>
          <div>[[item.name.first]] [[item.name.last]]</div>
          <regex-highlighter regex="([[filter]]{1})" string="[[item.email]]"></regex-highlighter>
        </paper-item-body>
      </paper-icon-item>
    </template>
  </vaadin-combo-box>
  
 
</template>