| <!-- |
| Copyright (C) 2016 The Android Open Source Project |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <link rel="import" href="../../../bower_components/polymer/polymer.html"> |
| <link rel="import" href="../../../bower_components/iron-input/iron-input.html"> |
| <link rel="import" href="../../shared/gr-cursor-manager/gr-cursor-manager.html"> |
| |
| <dom-module id="gr-autocomplete"> |
| <template> |
| <style> |
| input { |
| font-size: 1em; |
| height: 100%; |
| width: 100%; |
| } |
| input.borderless, |
| input.borderless:focus { |
| border: none; |
| outline: none; |
| } |
| #suggestions { |
| background-color: #fff; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, .3); |
| position: absolute; |
| z-index: 10; |
| } |
| ul { |
| list-style: none; |
| } |
| li { |
| cursor: pointer; |
| padding: .5em .75em; |
| } |
| li.selected { |
| background-color: #eee; |
| } |
| </style> |
| <input |
| id="input" |
| class$="[[_computeClass(borderless)]]" |
| is="iron-input" |
| disabled$="[[disabled]]" |
| bind-value="{{text}}" |
| placeholder="[[placeholder]]" |
| on-keydown="_handleInputKeydown" |
| on-focus="_updateSuggestions" |
| autocomplete="off" /> |
| <div |
| id="suggestions" |
| hidden$="[[_computeSuggestionsHidden(_suggestions)]]"> |
| <ul> |
| <template is="dom-repeat" items="[[_suggestions]]"> |
| <li |
| data-index$="[[index]]" |
| on-tap="_handleSuggestionTap">[[item.name]]</li> |
| </template> |
| </ul> |
| </div> |
| <gr-cursor-manager |
| id="cursor" |
| index="{{_index}}" |
| cursor-target-class="selected" |
| stops="[[_getSuggestionElems(_suggestions)]]"></gr-cursor-manager> |
| </template> |
| <script src="gr-autocomplete.js"></script> |
| </dom-module> |