Skip to main content
100%

template of autocomplete component

✓ Published0🌍 Public
Aalexfinnarn
Last edited Dec 3, 2018
Created on Dec 3, 2018

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`.

AI-generated description

Similar vizzes

Loading thumbnail…

logic behind template

This example demonstrates the interactive behavior of an autocomplete input component, showing how user keystrokes filter a list of available options and how keyboard navigation moves a highlighted selection. The component relies on Vue.js computed properties to derive filtered options from a centralized Vuex store, using the `fOptions` and `options` getters. Its methods handle input events and arrow-key movements, while the `select` method confirms a choice. The code references the Vuex store’s `autocompleteOptions` state, and the UI updates reactively through Vue’s reactivity system, without any external visualization libraries.

Aalexfinnarn
84% match
Loading thumbnail…

Places Autocomplete

This example demonstrates a Google Maps place-autocomplete interface within a Vue.js template. It shows how a user-selected address from the autocomplete dropdown updates the map’s center coordinates, displaying the chosen location’s latitude and longitude. The code uses the `gmap-autocomplete` component from the Vue Google Maps library, binding the `place_changed` event to a `setPlace` method. That method reads the selected place’s geometry location and assigns its lat/lng values to the component’s data properties, which drive the map view.

Aalexfinnarn
67% match
Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX
62% match
Loading thumbnail…

Angular typeahead snippet.

Two AngularJS typeahead inputs demonstrate both synchronous and asynchronous autocomplete. The first filters a hardcoded array of U.S. state names using `$viewValue` and `limitTo:8`. The second uses `$http.get` to query the Google Maps Geocoding API, returning formatted addresses as a promise, with a loading glyphicon shown via `typeahead-loading`. Both bind selections to the model, displayed as JSON in `<pre>` blocks.

Aandybak
60% match
Loading thumbnail…

Gist 239004

This visualization demonstrates a multi-select input interface where users can add and remove tags or text values using commas or spaces as separators. The code shows how the component dynamically renders resizable text boxes and styled "bit" elements within a list, with keyboard navigation and delete/backspace handling for managing selections. Built on the Prototype.js and Script.aculo.us libraries, it uses classes like `TextboxList` and `ResizableTextbox` to manage input focus, resize behavior, and form value updates based on the current set of selected items.

CCaged
60% match
Loading thumbnail…

Disable HTML form input autocomplete and autofill in React

This example shows how to prevent Chrome autofill and autocomplete on React input fields by manipulating the `autoComplete` attribute. It demonstrates two approaches: setting `autoComplete="disabled"` directly on the `input` element, and using an `onFocus` handler that calls `setAttribute` to force the attribute to "disabled" when React would otherwise render "off". The code uses React's synthetic event system and JSX syntax within a functional component, referencing Chromium’s form style documentation for alternatives like `new-password`.

MMonaiThang
59% match
Loading thumbnail…

Autofocus

This example demonstrates how keyboard input can trigger a data visualization update on a web page. It uses a simple input field and listens for keydown events on the document window to display the numeric key code of the pressed key. The code relies on D3 version 3’s `d3.select` and `d3.event` APIs to manage element selection and event handling, and it updates the input element’s value property with the key code. The interaction is minimal, focusing on immediate visual feedback without additional data processing or rendering.

Mmbostock
58% match
Loading thumbnail…

vuejs finder, a viewModel for a simple searchable table with filtering

This example demonstrates a searchable, paginated table with live filtering, where users navigate through results and adjust page size through a Vue-driven interface. The viewModel initializes with a Vue instance and uses custom methods like `previousPage`, `nextPage`, `changeLimit`, and `refilter` to manage state. It fetches data via an AJAX helper (`ajaxIt.get`) from an API endpoint, sending query parameters for limit, offset, and filter fields. Responses update Vue properties such as `result`, `rowCount`, and `offsetPlusLimit`, enabling reactive display of the table’s current page and total record count.

Aandrewfulrich
57% match