yolap-typeahead-url.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="./yolap-behaviors.html">

<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="yolap-typeahead-url">
	<style>
	    :host {
	      position: relative;
	      width: 100px;
	    }
	    :host .input{
	      position: relative;
	      height: 30px;
	      width: 150px;
	    }
	    :host .input>input{
	      width: inherit;
	      height: inherit;
	    }
	    :host .input>.suggest{
	      width: inherit;
	      position: relative;
	      z-index: 100;
	      display: table-caption;
	      max-height: 300px;
	      overflow-y: scroll;
	      overflow-x: hidden;
	    }
	    :host .input>.suggest>.active{
	    	background-color: rgba(20,200,0,1);
	    }
	    :host .input>.suggest>div{
	      background-color: grey;
	      width: inherit;
	      padding-left: 10px;
	    }
	    :host .input>.suggest a{
	    	text-decoration: none;
	    	color: black;
	    }
	    :host .input>.suggest>div:hover{
	      cursor: pointer;
	      border-top: solid 1px;
	      border-bottom: solid 1px;
	    }
	</style>
	<template>
		<div class="input">
		  <input type="text" id="input" value='' placeholder='Input search query' on-input='valueHandle'>
		  <div id="suggestions" class="suggest">
		    <template is='dom-repeat' items='{{suggest}}'>
		      <div>
		      	<a href="{{item.url}}">
			      	<span>{{item.name}}</span>
		        	<template is='dom-if' if='{{icon}}'>
		        		<iron-icon icon="{{icon}}"></iron-icon>
		        	</template>
		        </a>
		      </div>
		    </template>
		  </div>
		</div>
	</template>
</dom-module>

<script>

Polymer({
	is: 'yolap-typeahead-url',
	properties: {
		icon: {
			type: String,
		},
	},
	behaviors: [TypeaheadYolapBehavior],
	valueHandle: function(){
	  this.query = this.$.input.value;
	},
});
</script>