Skip to main content
100%

Angular typeahead snippet.

✓ Published0🌍 Public
Aandybak
Last edited Jan 18, 2014
Created on Jan 18, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Typeahead + CartoDB

This example combines a text input field with a typeahead autocomplete widget to search a list of country names. It shows how a CartoDB SQL query fetches distinct country names from the `d3_world_borders` table and populates the Bootstrap typeahead suggestion list. The code uses `cartodb.SQL` to execute the query and `$('#filter').typeahead` to bind the results. The visualization relies on Bootstrap’s typeahead JavaScript and CartoDB’s client-side API, with no map rendering.

Aandrewxhill
64% match
Loading thumbnail…

Ultra Fast Type-ahead

This visualization demonstrates an ultra-fast type-ahead search interface for country names. The code loads a JSON dataset of countries, maps it to an array of names, and uses jQuery’s `$('#search').typeahead` API with a custom substring matcher that employs a regular expression (`^${q}`) to filter results from the first letter. The interface highlights matching text, providing immediate feedback as the user types.

YYuliya
61% match
Loading thumbnail…

template of autocomplete component

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

Aalexfinnarn
60% match
Loading thumbnail…

Gist 8420680

This example demonstrates a simple text-input binding pattern, showing a hard-coded value on the left that changes to an AngularJS two-way bound model on the right. The code uses AngularJS’s `ng-model` directive to connect an input field directly to a property on the current booking object, while the left input uses a static template expression with `{{ }}` that displays the same value without updating it. The transition highlights how `ng-model` enables live synchronization between the view and the underlying data model, whereas the plain interpolation only renders the initial value. No external visualization libraries are used; the example focuses on AngularJS’s data-binding mechanics.

Aandybak
59% match
Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K
58% 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
58% match
Loading thumbnail…

Angular awesome

The visualization demonstrates an interactive color-picking interface built with Angular, using the `ngx-color-picker` library. It shows a palette of selectable color swatches alongside a live preview of the chosen color, with the selected value displayed in real time. The code instantiates the color picker component and binds its output to update the display dynamically, leveraging Angular’s two-way data binding to synchronize state. The rendering relies on standard HTML and CSS within Angular templates, with no external charting or simulation libraries involved.

TTomStanczyk
57% 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
56% match