npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-typeahead

v1.0.2

Published

An Angular.js wrapper around the Twitter Typeahead library.

Downloads

6,923

Readme

sfTypeahead: A Twitter Typeahead directive

Build Status Coverage: 100% Version dependencies Status

A simple Angular.js directive wrapper around the Twitter Typeahead library.

Getting Started

Get angular-typeahead from your favorite source:

Note: angular-typeahead supports Angular.js v1.2.x through v1.5.x and depends on typeahead.js v0.11.x. Make sure dependencies are met in your setup:

  • global: include jQuery, angularjs and typeahead.js before angular-typeahead.js.
  • commonJS (node, browserify): angular-typeahead explicitly requires angular and typeahead.js. (note: with browserify, include jquery.js and typeahead.js externally, because angular does not define a dependency on jquery)
  • amd (require.js): angular-typeahead explicitly requires angular and declares itself as angular-typeahead. Note that typeahead.js does not work well with AMD.js, you may find this workaround useful.

Demo

Please feel free to play with the Plnkr: LIVE DEMO

Usage

<input type="text" datasets="datasets" options="options" ng-model="model" editable="editable" sf-typeahead />

See the Plnkr LIVE DEMO for a complete integrated example.

Parameters

| Parameter | Default | Description | |---------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | datasets | {} | One or an array of twitter typeahead datasets. | | options | {} | Options parameter passed directly to twitter typeahead. | | allow-custom | true | Boolean. If false, the model value can not take custom values as text is typed in the input field. |

Contributing

Please feel free to add any issues to the GitHub issue tracker.

Contributions are welcome but please try to adhere to the folowing guidelines:

Testing

Any code you write should be tested. Test the "happy path" as well as corner cases. Code cannot be merged in master unless it achieves 100% coverage on everything. To run tests automatically when a file changes, run npm run watch.

Tests run in Chrome by default, but you can override this by setting the KARMA_BROWSER environment variable. Example:

KARMA_BROWSER=Firefox npm run watch
KARMA_BROWSER=PhantomJS npm run watch

If you are not sure how to test something, ask about it in your pull request description.

JSHint

I recommend you use a jshint plugin in your editor, this will help you spot errors faster and make it easier to write clean code that is going to pass QA. In any case, npm run watch runs jshint on the code whenever you save.