Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-cli-auto-complete

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-auto-complete

ember-cli addon that provides type-ahead selection for text inputs

  • 0.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-85.71%
Maintainers
1
Weekly downloads
 
Created
Source

ember-cli-auto-complete

Build Status

Description

ember-cli addon that provides type-ahead selection for text inputs

Installation

npm install ember-cli-auto-complete --save-dev

How to use this component

First add a custom component that extends the AutoComplete component. In this component you will need to declare 2 computed properties.

  1. the suggestions computed that will let you define a filter function
  2. the options that are available for the end user
import AutoComplete from "ember-cli-auto-complete/components/auto-complete";

export default AutoComplete.extend({
  suggestions: function() {
      var inputVal = this.get("inputVal") || "";
      return this.get("options").filter(function(item) {
          return item.get("value").toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
      });
  }.property("inputVal", "options.@each"),
  optionsToMatch: function() {
      var caseInsensitiveOptions = [];
      this.get("options").forEach(function(item) {
          var value = item.get("value");
          caseInsensitiveOptions.push(value);
          caseInsensitiveOptions.push(value.toLowerCase());
      });
      return caseInsensitiveOptions;
  }.property("options.@each")
});

Next prepare a list of options for the component with both a value and label property

export default Ember.Route.extend({
    model: function() {
        var options = [];
        options.pushObject(Foo.create({value: "ABC", label: "SOMETHING 1"}));
        options.pushObject(Foo.create({value: "ABCD", label: "SOMETHING 2"}));
        options.pushObject(Foo.create({value: "ABCDE", label: "SOMETHING 3"}));
        return Ember.RSVP.hash({
            model: Bar.create(),
            options: options
        });
    },
    setupController: function(controller, hash) {
        controller.set("model", hash.model);
        controller.set("options", hash.options);
    }
});

Now add the html to your template for the custom component you declared above.

{{my-auto-complete options=options selectedValue=model.code placeHolderText="Find a thing" noMesssagePlaceHolderText="No things are found" showValue=true}}
  1. you must pass in options (again- value/label are the expected properties)
  2. selectedValue should be model bound
  3. optional placeHolderText for the input
  4. optional placeHolderText for the no match message
  5. if you wish to show the value in the dropdown (along side the label) set this to true

Running the unit tests

npm install
bower install
ember test

Example project built in

1) npm install
2) bower install
3) ember server
4) localhost:4200

Credits

First I'd like to thank Nick Christus for the design work that made this great component happen to begin with. Next I'd like to thank Charlie for his amazing project ember-cli-suggest as this project truly represents a fork of his work.

License

Copyright © 2015 Toran Billups http://toranbillups.com

Licensed under the MIT License

Keywords

FAQs

Package last updated on 02 Mar 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc