Add ability to search through items in Searchable component
MODIFY
resources/assets/js/components/Searchable.vue
resources/assets/js/components/Searchable.vue
<span v-else v-html="selected.label"></span>
</div>
<div class="searchable__list" v-if="shown">
- <div v-for="item in items" @click="select(item)" v-html="item.label"></div>
+ <input type="search" v-model="query" placeholder="Search" ref="query" />
+ <ul>
+ <li v-for="item in queriedItems" @click="select(item)" v-html="item.label"></li>
+ </ul>
</div>
</div>
</template>
data() {
return {
shown: false,
- selected: this.initial ? this.getItemByKey(this.initial) : null
+ selected: this.initial ? this.getItemByKey(this.initial) : null,
+ query: ''
}
},
}
return ''
+ },
+
+ queriedItems() {
+ return this.items.filter(item => {
+ if (this.query.length < 1 || item.label.toUpperCase().indexOf(this.query.toUpperCase()) > -1) {
+ return item
+ }
+ })
}
},
toggleShown() {
this.shown = !this.shown
+
+ this.$nextTick(() => {
+ if (this.$refs.query) {
+ this.$refs.query.focus()
+ }
+ })
},
show() {

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -82,12 +82,27 @@ canvas {
&__list {
margin-top: 10px;
background: $colors-light-body;
- max-height: 200px;
- overflow-y: scroll;
border: 1px solid $colors-light-border;
border-radius: $dimensions-box-border-radius;
- div {
+ input {
+ padding: 10px;
+ width: 100%;
+ font: inherit;
+ background: none;
+ border: none;
+ border-bottom: 1px solid $colors-light-border;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ ul {
+ overflow-y: scroll;
+ max-height: 200px;
+
+ li {
padding: 10px;
&:hover {
@@ -97,3 +112,4 @@ canvas {
}
}
}
+}

Add ability to search through items in Searchable component