text: webpackJsonp(["autocompletedemo.module"],{
  
  /***/ "./src/app/showcase/components/autocomplete/autocompletedemo-routing.module.ts":
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AutoCompleteDemoRoutingModule; });
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_router__ = __webpack_require__("./node_modules/@angular/router/esm5/router.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__autocompletedemo__ = __webpack_require__("./src/app/showcase/components/autocomplete/autocompletedemo.ts");
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
      return c > 3 && r && Object.defineProperty(target, key, r), r;
  };
  
  
  
  var AutoCompleteDemoRoutingModule = (function () {
      function AutoCompleteDemoRoutingModule() {
      }
      AutoCompleteDemoRoutingModule = __decorate([
          Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["J" /* NgModule */])({
              imports: [
                  __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* RouterModule */].forChild([
                      { path: '', component: __WEBPACK_IMPORTED_MODULE_2__autocompletedemo__["a" /* AutoCompleteDemo */] }
                  ])
              ],
              exports: [
                  __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* RouterModule */]
              ]
          })
      ], AutoCompleteDemoRoutingModule);
      return AutoCompleteDemoRoutingModule;
  }());
  
  
  
  /***/ }),
  
  /***/ "./src/app/showcase/components/autocomplete/autocompletedemo.html":
  /***/ (function(module, exports) {
  
  module.exports = "<div class=\"content-section introduction\">\r\n    <div>\r\n        <span class=\"feature-title\">AutoComplete</span>\r\n        <span>AutoComplete is an input component that provides real-time suggestions when being typed.</span>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"content-section implementation\">\r\n    <h3 class=\"first\">Basic</h3>\r\n    <p-autoComplete [(ngModel)]=\"country\" [suggestions]=\"filteredCountriesSingle\" (completeMethod)=\"filterCountrySingle($event)\" field=\"name\" [size]=\"30\"\r\n        placeholder=\"Countries\" [minLength]=\"1\"></p-autoComplete>\r\n    <span style=\"margin-left:10px\">Country: {{country ? country.name||country : 'none'}}</span>\r\n\r\n    <h3>Advanced</h3>\r\n    <p-autoComplete [(ngModel)]=\"brand\" [suggestions]=\"filteredBrands\" (completeMethod)=\"filterBrands($event)\" [size]=\"30\"\r\n        [minLength]=\"1\" placeholder=\"Hint: type 'v' or 'f'\" [dropdown]=\"true\">\r\n        <ng-template let-brand pTemplate=\"item\">\r\n            <div class=\"ui-helper-clearfix\" style=\"border-bottom:1px solid #D5D5D5\">\r\n                <img src=\"assets/showcase/images/demo/car/{{brand}}.png\" style=\"width:32px;display:inline-block;margin:5px 0 2px 5px\"/>\r\n                <div style=\"font-size:18px;float:right;margin:10px 10px 0 0\">{{brand}}</div>\r\n            </div>\r\n        </ng-template>\r\n    </p-autoComplete>\r\n    <span style=\"margin-left:50px\">Brand: {{brand||'none'}}</span>\r\n\r\n    <h3>Multiple</h3>\r\n    <span class=\"ui-fluid\">\r\n        <p-autoComplete [(ngModel)]=\"countries\" [suggestions]=\"filteredCountriesMultiple\" (completeMethod)=\"filterCountryMultiple($event)\" styleClass=\"wid100\"\r\n            [minLength]=\"1\" placeholder=\"Countries\" field=\"name\" [multiple]=\"true\">\r\n        </p-autoComplete>\r\n    </span>\r\n    <ul>\r\n        <li *ngFor=\"let c of countries\">{{c.name}}</li>\r\n    </ul>\r\n</div>\r\n\r\n<div class=\"content-section documentation\">\r\n    <p-tabView effect=\"fade\">\r\n        <p-tabPanel header=\"Documentation\">\r\n            <h3>Import</h3>\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nimport &#123;AutoCompleteModule&#125; from 'primeng/autocomplete';\r\n</code>\r\n</pre>\r\n\r\n            <h3>Getting Started</h3>\r\n            <p>AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod\r\n            gets the query text as event.query property and should update the suggestions with the search results.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"text\" [suggestions]=\"results\" (completeMethod)=\"search($event)\"&gt;&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nexport class AutoCompleteDemo &#123;\r\n\r\n    text: string;\r\n\r\n    results: string[];\r\n\r\n    search(event) &#123;\r\n        this.mylookupservice.getResults(event.query).then(data => &#123;\r\n            this.results = data;\r\n        &#125;);\r\n    &#125;\r\n\r\n&#125;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Change Detection</h3>\r\n            <p>AutoComplete either uses setter based checking or ngDoCheck to realize if the suggestions has changed to update the UI. This is configured using the immutable\r\n                property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record\r\n                should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change.\r\n                For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes\r\n                this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however\r\n                both methods can be used depending on your preference.\r\n            </p>\r\n\r\n            <p>Note that if no suggestions are available after searching, provide an empty array instead of a null value.</p>\r\n\r\n            <h3>Model Driven Forms</h3>\r\n            <p>AutoComplete can be used in a model driven form as well.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete formControlName=\"city\" [suggestions]=\"results\" (completeMethod)=\"search($event)\"&gt;&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Dropdown</h3>\r\n            <p>Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode\r\n                property that takes \"blank\" or \"current\" as possible values. \"blank\" is the default mode to send a query with an empty string\r\n                whereas \"current\" setting sends a query with the current value of the input.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"text\" [suggestions]=\"results\" (completeMethod)=\"search($event)\"\r\n            [dropdown]=\"true\"&gt;&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nexport class AutoCompleteDemo &#123;\r\n\r\n    text: string;\r\n\r\n    results: string[];\r\n\r\n    search(event) &#123;\r\n        this.mylookupservice.getResults(event.query).then(data => &#123;\r\n            this.results = data;\r\n        &#125;);\r\n    &#125;\r\n\r\n    handleDropdown(event) &#123;\r\n        //event.query = current value in input field\r\n    &#125;\r\n\r\n&#125;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Multiple Selection</h3>\r\n            <p>Multiple mode is used to select more than one value from the autocomplete. In this case, model reference should be an array.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"texts\" [suggestions]=\"results\" (completeMethod)=\"search($event)\" [multiple]=\"true\"&gt;&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nexport class AutoCompleteDemo &#123;\r\n\r\n    texts: string[];\r\n\r\n    results: string[];\r\n\r\n    search(event) &#123;\r\n        this.mylookupservice.getResults(event.query).then(data => &#123;\r\n            this.results = data;\r\n        &#125;);\r\n    &#125;\r\n\r\n&#125;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Objects</h3>\r\n            <p>AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the\r\n            object instance of a suggestion. Here is an example with a Country object that has name and code fields such as &#123;name:\"United States\",code:\"USA\"&#125;.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"val\" [suggestions]=\"results\" (completeMethod)=\"search($event)\" field=\"name\"&gt;&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nexport class AutoCompleteDemo &#123;\r\n\r\n    val: country;\r\n\r\n    results: country[];\r\n\r\n    search(event) &#123;\r\n        this.countrylookupservice.getResults(event.query).then(data => &#123;\r\n            this.results = data;\r\n        &#125;);\r\n    &#125;\r\n\r\n&#125;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Force Selection</h3>\r\n            <p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared\r\n            to make sure the value passed to the model is always one of the suggestions.</p>\r\n            <pre>\r\n            <code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"val\" [suggestions]=\"results\" (completeMethod)=\"search($event)\" [forceSelection]=\"true\"&gt;&lt;/p-autoComplete&gt;\r\n            </code>\r\n            </pre>\r\n\r\n            <h3>Templating</h3>\r\n            <p>Item ng-template allows displaying custom content inside the suggestions panel. The local ng-template variable passed to the ng-template is an object in the suggestions array.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"brand\" [suggestions]=\"filteredBrands\" (completeMethod)=\"filterBrands($event)\"&gt;\r\n    &lt;ng-template let-brand pTemplate=\"item\"&gt;\r\n        &lt;div class=\"ui-helper-clearfix\" style=\"border-bottom:1px solid #D5D5D5\"&gt;\r\n            &lt;img src=\"assets/showcase/images/demo/car/{{brand}}.png\" style=\"width:32px;display:inline-block;margin:5px 0 2px 5px\"/&gt;\r\n            &lt;div style=\"font-size:18px;float:right;margin:10px 10px 0 0\"&gt;&#123;&#123;brand&#125;&#125;&lt;/div&gt;\r\n        &lt;/div&gt;\r\n    &lt;/ng-template&gt;\r\n&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n            <p>In multiple mode, selected item can be customized using selectedItem ng-template. Note that this\r\n                template is not supported in single mode.</p>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;p-autoComplete [(ngModel)]=\"texts\" [suggestions]=\"results\" (completeMethod)=\"search($event)\" [multiple]=\"true\"&gt;\r\n    &lt;ng-template let-value pTemplate=\"selectedItem\"&gt;\r\n        &lt;span style=\"font-size:18px\"&gt;&gt;&#123;&#123;value&#125;&#125;&lt;&lt;/span&gt;\r\n    &lt;/ng-template&gt;\r\n&lt;/p-autoComplete&gt;\r\n</code>\r\n</pre>\r\n\r\n            <h3>Properties</h3>\r\n            <div class=\"doc-tablewrapper\">\r\n                <table class=\"doc-table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Name</th>\r\n                            <th>Type</th>\r\n                            <th>Default</th>\r\n                            <th>Description</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>suggestions</td>\r\n                            <td>array</td>\r\n                            <td>null</td>\r\n                            <td>An array of suggestions to display.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>field</td>\r\n                            <td>any</td>\r\n                            <td>null</td>\r\n                            <td>Field of a suggested object to resolve and display.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>scrollHeight</td>\r\n                            <td>string</td>\r\n                            <td>200px</td>\r\n                            <td>Maximum height of the suggestions panel.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>dropdown</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>Displays a button next to the input field when enabled.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>multiple</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>Specifies if multiple values can be selected.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>minLength</td>\r\n                            <td>number</td>\r\n                            <td>1</td>\r\n                            <td>Minimum number of characters to initiate a search.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>delay</td>\r\n                            <td>number</td>\r\n                            <td>300</td>\r\n                            <td>Delay between keystrokes to wait before sending a query.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>style</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Inline style of the component.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>styleClass</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Style class of the component.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>inputStyle</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Inline style of the input field.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>inputStyleClass</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Inline style of the input field.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>inputId</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Identifier of the focus input to match a label defined for the component.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>placeholder</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Hint text for the input field.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>readonly</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>When present, it specifies that the input cannot be typed.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>disabled</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>When present, it specifies that the component should be disabled.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>maxlength</td>\r\n                            <td>number</td>\r\n                            <td>null</td>\r\n                            <td>Maximum number of character allows in the input field.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>size</td>\r\n                            <td>number</td>\r\n                            <td>null</td>\r\n                            <td>Size of the input field.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>appendTo</td>\r\n                            <td>any</td>\r\n                            <td>null</td>\r\n                            <td>Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>tabindex</td>\r\n                            <td>number</td>\r\n                            <td>null</td>\r\n                            <td>Index of the element in tabbing order.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>dataKey</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>A property to uniquely identify a value in options.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>autoHighlight</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>When enabled, highlights the first item in the list by default.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>type</td>\r\n                            <td>string</td>\r\n                            <td>text</td>\r\n                            <td>Type of the input, defaults to \"text\".</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>emptyMessage</td>\r\n                            <td>string</td>\r\n                            <td>null</td>\r\n                            <td>Message to display when there are no results for a query.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>immutable</td>\r\n                            <td>boolean</td>\r\n                            <td>true</td>\r\n                            <td>Defines how the suggestions should be manipulated. More information is available at \"Change Detection\" section above.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>required</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>forceSelection</td>\r\n                            <td>boolean</td>\r\n                            <td>false</td>\r\n                            <td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only\r\n                                accepting values from the suggestions.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>dropdownMode</td>\r\n                            <td>string</td>\r\n                            <td>blank</td>\r\n                            <td>Specifies the behavior dropdown button. Default \"blank\" mode\r\n                                    sends an empty string and \"current\" mode sends the input value.</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n\r\n            <h3>Events</h3>\r\n            <div class=\"doc-tablewrapper\">\r\n                <table class=\"doc-table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Name</th>\r\n                            <th>Parameters</th>\r\n                            <th>Description</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>completeMethod</td>\r\n                            <td>\r\n                                event.originalEvent: browser event <br>\r\n                                event.query: Value to search with\r\n                            </td>\r\n                            <td>Callback to invoke to search for suggestions.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onFocus</td>\r\n                            <td>event: Browser event</td>\r\n                            <td>Callback to invoke when autocomplete gets focus.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onBlur</td>\r\n                            <td>event: Browser event</td>\r\n                            <td>Callback to invoke when autocomplete loses focus.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onKeyUp</td>\r\n                            <td>event: Browser event</td>\r\n                            <td>Callback to invoke when a user releases a key.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onSelect</td>\r\n                            <td>\r\n                                value: Selected value\r\n                            </td>\r\n                            <td>Callback to invoke when a suggestion is selected.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onUnselect</td>\r\n                            <td>\r\n                                value: Unselected value in multiple mode\r\n                            </td>\r\n                            <td>Callback to invoke when a selected value is removed.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onDropdownClick</td>\r\n                            <td>\r\n                                event.originalEvent: browser event <br>\r\n                                event.query: Current value of the input field\r\n                            </td>\r\n                            <td>Callback to invoke to when dropdown button is clicked.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>onClear</td>\r\n                            <td>event: browser event</td>\r\n                            <td>Callback to invoke to when inpu field is cleared.</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n\r\n            <h3>Styling</h3>\r\n            <p>Following is the list of structural style classes, for theming classes visit <a href=\"#\" [routerLink]=\"['/theming']\">theming page</a>.</p>\r\n            <div class=\"doc-tablewrapper\">\r\n                <table class=\"doc-table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Name</th>\r\n                            <th>Element</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>ui-autocomplete</td>\r\n                            <td>Container element</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-panel</td>\r\n                            <td>Overlay panel of suggestions.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-items</td>\r\n                            <td>List container of suggestions.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-list-item</td>\r\n                            <td>List item of a suggestion.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-token</td>\r\n                            <td>Element of a selected item in multiple mode.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-token-icon</td>\r\n                            <td>Close icon element of a selected item in multiple mode.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-token-label</td>\r\n                            <td>Label of a selected item in multiple mode.</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>ui-autocomplete-loader</td>\r\n                            <td>Loader icon.</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n\r\n            <h3>Dependencies</h3>\r\n            <p>None.</p>\r\n        </p-tabPanel>\r\n\r\n        <p-tabPanel header=\"Source\">\r\n            <a href=\"https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/autocomplete\" class=\"btn-viewsource\" target=\"_blank\">\r\n                <i class=\"fa fa-github\"></i>\r\n                <span>View on GitHub</span>\r\n            </a>\r\n<pre>\r\n<code class=\"language-markup\" pCode ngNonBindable>\r\n&lt;h3 class=\"first\"&gt;Basic&lt;/h3&gt;\r\n&lt;p-autoComplete [(ngModel)]=\"country\" [suggestions]=\"filteredCountriesSingle\" (completeMethod)=\"filterCountrySingle($event)\" field=\"name\" [size]=\"30\"\r\n    placeholder=\"Countries\" [minLength]=\"1\"&gt;&lt;/p-autoComplete&gt;\r\n&lt;span style=\"margin-left:10px\"&gt;Country: {{country ? country.name||country : 'none'}}&lt;/span&gt;\r\n\r\n&lt;h3&gt;Advanced&lt;/h3&gt;\r\n&lt;p-autoComplete [(ngModel)]=\"brand\" [suggestions]=\"filteredBrands\" (completeMethod)=\"filterBrands($event)\" [size]=\"30\"\r\n    [minLength]=\"1\" placeholder=\"Hint: type 'v' or 'f'\" [dropdown]=\"true\"&gt;\r\n    &lt;ng-template let-brand pTemplate=\"item\"&gt;\r\n        &lt;div class=\"ui-helper-clearfix\" style=\"border-bottom:1px solid #D5D5D5\"&gt;\r\n            &lt;img src=\"assets/showcase/images/demo/car/{{brand}}.png\" style=\"width:32px;display:inline-block;margin:5px 0 2px 5px\"/&gt;\r\n            &lt;div style=\"font-size:18px;float:right;margin:10px 10px 0 0\"&gt;{{brand}}&lt;/div&gt;\r\n        &lt;/div&gt;\r\n    &lt;/ng-template&gt;\r\n&lt;/p-autoComplete&gt;\r\n&lt;span style=\"margin-left:50px\"&gt;Brand: {{brand||'none'}}&lt;/span&gt;\r\n\r\n&lt;h3&gt;Multiple&lt;/h3&gt;\r\n&lt;span class=\"ui-fluid\"&gt;\r\n    &lt;p-autoComplete [(ngModel)]=\"countries\" [suggestions]=\"filteredCountriesMultiple\" (completeMethod)=\"filterCountryMultiple($event)\" styleClass=\"wid100\"\r\n        [minLength]=\"1\" placeholder=\"Countries\" field=\"name\" [multiple]=\"true\"&gt;\r\n    &lt;/p-autoComplete&gt;\r\n&lt;/span&gt;\r\n&lt;ul&gt;\r\n    &lt;li *ngFor=\"let c of countries\"&gt;&#123;&#123;c.name&#125;&#125;&lt;/li&gt;\r\n&lt;/ul&gt;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\nexport class AutoCompleteDemo &#123;\r\n\r\n    country: any;\r\n\r\n    countries: any[];\r\n\r\n    filteredCountriesSingle: any[];\r\n\r\n    filteredCountriesMultiple: any[];\r\n\r\n    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];\r\n\r\n    filteredBrands: any[];\r\n\r\n    brand: string;\r\n\r\n    constructor(private countryService: CountryService) &#123; &#125;\r\n\r\n    filterCountrySingle(event) &#123;\r\n        let query = event.query;\r\n        this.countryService.getCountries().then(countries => &#123;\r\n            this.filteredCountriesSingle = this.filterCountry(query, countries);\r\n        &#125;);\r\n    &#125;\r\n\r\n    filterCountryMultiple(event) &#123;\r\n        let query = event.query;\r\n        this.countryService.getCountries().then(countries => &#123;\r\n            this.filteredCountriesMultiple = this.filterCountry(query, countries);\r\n        &#125;);\r\n    &#125;\r\n\r\n    filterCountry(query, countries: any[]):any[] &#123;\r\n        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side\r\n        let filtered : any[] = [];\r\n        for(let i = 0; i < countries.length; i++) &#123;\r\n            let country = countries[i];\r\n            if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;\r\n                filtered.push(country);\r\n            &#125;\r\n        &#125;\r\n        return filtered;\r\n    &#125;\r\n\r\n    filterBrands(event) &#123;\r\n        this.filteredBrands = [];\r\n        for(let i = 0; i < this.brands.length; i++) &#123;\r\n            let brand = this.brands[i];\r\n            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) &#123;\r\n                this.filteredBrands.push(brand);\r\n            &#125;\r\n        &#125;\r\n    &#125;\r\n&#125;\r\n</code>\r\n</pre>\r\n\r\n<pre>\r\n<code class=\"language-typescript\" pCode ngNonBindable>\r\n@Injectable()\r\nexport class CountryService &#123;\r\n\r\n    constructor(private http: Http) &#123;&#125;\r\n\r\n    getCountries() &#123;\r\n        return this.http.get('showcase/resources/data/countries.json')\r\n                    .toPromise()\r\n                    .then(res => &lt;any[]&gt; res.json().data)\r\n                    .then(data => &#123; return data; &#125;);\r\n    &#125;\r\n&#125;\r\n</code>\r\n</pre>\r\n        </p-tabPanel>\r\n    </p-tabView>\r\n</div>\r\n"
  
  /***/ }),
  
  /***/ "./src/app/showcase/components/autocomplete/autocompletedemo.module.ts":
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AutoCompleteDemoModule", function() { return AutoCompleteDemoModule; });
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_common__ = __webpack_require__("./node_modules/@angular/common/esm5/common.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_forms__ = __webpack_require__("./node_modules/@angular/forms/esm5/forms.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__autocompletedemo__ = __webpack_require__("./src/app/showcase/components/autocomplete/autocompletedemo.ts");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__autocompletedemo_routing_module__ = __webpack_require__("./src/app/showcase/components/autocomplete/autocompletedemo-routing.module.ts");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__components_autocomplete_autocomplete__ = __webpack_require__("./src/app/components/autocomplete/autocomplete.ts");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__components_tabview_tabview__ = __webpack_require__("./src/app/components/tabview/tabview.ts");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__components_codehighlighter_codehighlighter__ = __webpack_require__("./src/app/components/codehighlighter/codehighlighter.ts");
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
      return c > 3 && r && Object.defineProperty(target, key, r), r;
  };
  
  
  
  
  
  
  
  
  var AutoCompleteDemoModule = (function () {
      function AutoCompleteDemoModule() {
      }
      AutoCompleteDemoModule = __decorate([
          Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["J" /* NgModule */])({
              imports: [
                  __WEBPACK_IMPORTED_MODULE_1__angular_common__["b" /* CommonModule */],
                  __WEBPACK_IMPORTED_MODULE_2__angular_forms__["c" /* FormsModule */],
                  __WEBPACK_IMPORTED_MODULE_4__autocompletedemo_routing_module__["a" /* AutoCompleteDemoRoutingModule */],
                  __WEBPACK_IMPORTED_MODULE_5__components_autocomplete_autocomplete__["a" /* AutoCompleteModule */],
                  __WEBPACK_IMPORTED_MODULE_6__components_tabview_tabview__["a" /* TabViewModule */],
                  __WEBPACK_IMPORTED_MODULE_7__components_codehighlighter_codehighlighter__["a" /* CodeHighlighterModule */]
              ],
              declarations: [
                  __WEBPACK_IMPORTED_MODULE_3__autocompletedemo__["a" /* AutoCompleteDemo */]
              ]
          })
      ], AutoCompleteDemoModule);
      return AutoCompleteDemoModule;
  }());
  
  
  
  /***/ }),
  
  /***/ "./src/app/showcase/components/autocomplete/autocompletedemo.ts":
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AutoCompleteDemo; });
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
  /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__service_countryservice__ = __webpack_require__("./src/app/showcase/service/countryservice.ts");
  var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
      return c > 3 && r && Object.defineProperty(target, key, r), r;
  };
  var __metadata = (this && this.__metadata) || function (k, v) {
      if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  };
  
  
  var AutoCompleteDemo = (function () {
      function AutoCompleteDemo(countryService) {
          this.countryService = countryService;
          this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'VW'];
      }
      AutoCompleteDemo.prototype.filterCountrySingle = function (event) {
          var _this = this;
          var query = event.query;
          this.countryService.getCountries().then(function (countries) {
              _this.filteredCountriesSingle = _this.filterCountry(query, countries);
          });
      };
      AutoCompleteDemo.prototype.filterCountryMultiple = function (event) {
          var _this = this;
          var query = event.query;
          this.countryService.getCountries().then(function (countries) {
              _this.filteredCountriesMultiple = _this.filterCountry(query, countries);
          });
      };
      AutoCompleteDemo.prototype.filterCountry = function (query, countries) {
          //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
          var filtered = [];
          for (var i = 0; i < countries.length; i++) {
              var country = countries[i];
              if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                  filtered.push(country);
              }
          }
          return filtered;
      };
      AutoCompleteDemo.prototype.filterBrands = function (event) {
          this.filteredBrands = [];
          for (var i = 0; i < this.brands.length; i++) {
              var brand = this.brands[i];
              if (brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                  this.filteredBrands.push(brand);
              }
          }
      };
      AutoCompleteDemo = __decorate([
          Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
              template: __webpack_require__("./src/app/showcase/components/autocomplete/autocompletedemo.html")
          }),
          __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1__service_countryservice__["a" /* CountryService */]])
      ], AutoCompleteDemo);
      return AutoCompleteDemo;
  }());
  
  
  
  /***/ })
  
  });
  //# sourceMappingURL=autocompletedemo.module.chunk.js.map