{"version":"1.0","type":"rich","title":"template of autocomplete component","description":"This template demonstrates a reusable autocomplete input component built with Vue.js. It shows a text field that filters a list of options as the user types, with keyboard navigation via arrow keys, Enter to select, and Escape to close the dropdown. The component uses Vue’s `v-model`, `v-for`, and event handlers like `@input`, `@keydown`, and `@mouseenter` to manage the suggestion list, highlighting the currently focused option. The data source is an array of objects passed through a prop, with the displayed field determined by `theKey`.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-d96f3b569eafaade010d53b3f7c4135b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}