Filtering for ListBox

src/components/listbox/ListBox.vue

@@ -1,8 +1,14 @@
 <template>
     <div class="p-listbox p-inputtext p-component">
+        <div class="p-listbox-header" v-if="filter">
+            <div class="p-listbox-filter-container">
+                <input type="text" role="textbox" class="p-inputtext p-component" v-model="filterValue">
+                <span class="p-listbox-filter-icon pi pi-search"></span>
+            </div>
+        </div>
         <div class="p-listbox-list-wrapper" :style="listStyle">
             <ul class="p-listbox-list">
-                <li v-for="(option, i) of options" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
+                <li v-for="(option, i) of visibleOptions" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
                     :key="getOptionLabel(option)" @click="onOptionClick($event, option)" @touchend="onOptionTouchEnd()">
                     <slot :option="option" :index="i">  
                         {{getOptionLabel(option)}}
@@ -30,6 +36,11 @@ export default {
         optionValue: null
     },
     optionTouched: false,
+    data() {
+        return {
+            filterValue: null
+        };
+    },
     methods: {
         getOptionLabel(option) {
             return ObjectUtils.resolveFieldData(option, this.optionLabel);
@@ -148,6 +159,14 @@ export default {
             this.$emit('input', value);
             this.$emit('change', {originalEvent: event, value: value});
         }
+    },
+    computed: {
+        visibleOptions() {
+            if (this.filterValue)
+                return this.options.filter(option => this.getOptionLabel(option).toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1);
+            else
+                return this.options;
+        }
     }
 }
 </script>

src/views/listbox/ListBoxDemo.vue

@@ -9,14 +9,14 @@
 
         <div class="content-section implementation">
             <h3 class="first">Single</h3>
-            <p-listBox v-model="selectedCity" :options="cities" optionLabel="name" />{{selectedCity}}
+            <p-listBox v-model="selectedCity" :options="cities" optionLabel="name" />
 
             <h3>Multiple</h3>
             <p-listBox :multiple="true" v-model="selectedCities" :options="cities" optionLabel="name" />
 
             <h3>Advanced with Templating and Filtering</h3>
-            <p-listBox v-model="selectedCar" :options="cars" listStyle="max-height:250px" style="width:15em">
-                <template slot-scope="{option, index}">
+            <p-listBox v-model="selectedCar" :options="cars" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
+                <template slot-scope="{option}">
                     <div className="p-clearfix">
                         <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
                         <span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>