selectize 0.2.1

  • Readme
  • Changelog
  • Installing
  • 48

Selectize wrapper #

Setup #

  • include snippets after dart script
<script src='jquery220.js'></script>
<script src='jqueryui.min.js'></script> // only for drag and drop
<script src='packages/selectize/selectize.js'></script>
<link rel="stylesheet" href="packages/selectize/selectize.css">

Example #

see live example

Simple case #

  • dart
  selectize('#select-state',
      new SelectOptions(maxItems: 5, maxOptions: 3, plugins: ['restore_on_backspace', 'remove_button', 'drag_drop']));
  • HTML
<section class="demo">
  <div class="header">
    Max Items
  </div>
  <div class="sandbox">
    <select id="select-state" name="state[]" multiple class="demo-default" style="width:70%" placeholder="Select a state...">
      <option value="">Select a state...</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WY" selected>Wyoming</option>
    </select>
  </div>
  <div class="description">
    This example only allows 3 items. Select one more item and the control will be disabled
    until one or more are deleted.
  </div>
</section>

Complex customize #

  • create your own new option class from BaseOption

var REGEX_EMAIL = r"([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@" +
    r"(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)";

var mailOptions = [
  new MailBaseOption(email: 'nikola@tesla.com', name: 'Nikola Tesla'),
  new MailBaseOption(email: 'brian@thirdroute.com', name: 'Brian Reavis'),
  new MailBaseOption(email: 'someone@gmail.com'),
  new MailBaseOption(email: "c@a.com", name: "c")
];
var emailSelect = selectize(
    "#select-to",
    new SelectOptions(
        onInitialize: allowInterop(() {
          print("init");
        }),
        onChange: allowInterop((value) {
          print("change value ${value}");
        }),
        onItemAdd: allowInterop((value, item) {
          print("item change  ${value}  , ${item}");
        }),
        valueField: "email",
        sortField: "email",
        labelField: "name",
        searchField: ['name', 'email'],
        maxItems: null,
        persist: true,
        hideSelected: false,
        render: new RenderFuns(item: allowInterop((MailBaseOption item, escape) {
          return '<div>' +
              (item.name != null ? '<span class="name"> ${item.name} </span>' : '') +
              (item.email != null ? '<span class="email"> ${item.email} </span>' : '') +
              '</div>';
        }), option: allowInterop((item, escape) {
          return '<div>'
              '<span class="label"> ${item.name ?? item.email}'
              '</span>'
              '</div>';
        })),
        create: allowInterop((String input, Function cb) {
          var reg = new RegExp(REGEX_EMAIL);
          if (reg.hasMatch(input)) {
            return new MailBaseOption(email: input);
          }
        }),
        options: mailOptions));

emailSelect.on('change', (e) {
  print(emailSelect.items);
});
  • html
<section class="demo">
  <div class="header">
    Email Contacts
  </div>
  <div class="sandbox">
    <label for="select-to">Email:</label>
    <select id="select-to" class="contacts" placeholder="Pick some people..."></select>
  </div>
  <div class="description">
    This demonstrates two main things: (1) custom item and option rendering, and (2) item creation on-the-fly.
    Try typing a valid and invalid email address.
  </div>

</section>

Angular2 Entry #

  • Dart
@Component(
    selector: 'my-app',
    template: '''<h1>Angular 2 Selectize </h1>
    <jq-selective></jq-selective>
    <jq-selective-min></jq-selective-min>''',
    directives: const [NgSelectize, NgSelectize2])
class AppComponent {}
  • HTML
<section class="demo">
  <my-app>Loading...</my-app>
</section>

Angular2 Simple #

@Component(selector: 'jq-selective-min')
@View(
    template: r'''<div> {{selectedValue}}</div>
    <select [ngClass]="classes"  multiple class="demo-default" style="width:70%" placeholder="Select a box...">
      <option value="">Select a box...</option>
      <option value="big">big</option>
      <option value="small">small</option>
    </select>
            ''',
    directives: const [NgClass])
class NgSelectize2 implements AfterViewInit, OnDestroy, OnInit {
  NgZone zone;
  String selectedValue = '[]';
  List<String> classes;
  int _uniqueNs;
  Selectize _select;
  ngOnDestroy() {
    _select.destroy();
  }

  ngOnInit() {
    _uniqueNs = new math.Random().nextInt(1000000000);
    classes = ["select-ag$_uniqueNs"];
  }

  ngAfterViewInit() {
    _select = selectize(".select-ag$_uniqueNs");

    _select.on('change', allowInterop((e) {
      zone.run(() => selectedValue = _select.items.toString());
    }));
  }

  NgSelectize2(this.zone);
}

Angular2 Complex #

@Component(selector: 'jq-selective')
@View(
    template: r'''
<div> {{selectedValue}}</div>
<select  [ngClass]="classes"    placeholder="Pick some people..."></select>
            ''',
    directives: const [NgClass])
class NgSelectize implements AfterViewInit, OnDestroy, OnInit {
  ElementRef elelemtRef;
  NgZone zone;
  String selectedValue = 'c@a.com';
  List<String> classes;
  int uniqueNs;
  Selectize _select;
  ngOnDestroy() {
    _select.destroy();
  }

  ngOnInit() {
    uniqueNs = new math.Random().nextInt(1000000000);
    classes = ["select-ag$uniqueNs"];
  }

  ngAfterViewInit() {
    //var el = elelemtRef.nativeElement.children[0];
    //print("ng selective $el");
    _select = selectize(
        ".select-ag$uniqueNs",
        new SelectOptions(
            items: [selectedValue],
            onChange: allowInterop((value) {
              print("ng change value ${value}");
              zone.run(() => this.selectedValue = value);
            }),
            maxItems: 3,
            valueField: "email",
            sortField: "email",
            labelField: "name",
            searchField: ['name', 'email'],
            persist: true,
            create: allowInterop((String input, Function cb) {
              var reg = new RegExp(REGEX_EMAIL);
              if (reg.hasMatch(input)) {
                return new MailBaseOption(email: input);
              }
            }),
            render: new RenderFuns(item: allowInterop((MailBaseOption item, escape) {
              return '<div>' +
                  (item.name != null ? '<span class="name"> ${item.name} </span>' : '') +
                  (item.email != null ? '<span class="email"> ${item.email} </span>' : '') +
                  '</div>';
            }), option: allowInterop((item, escape) {
              return '<div>'
                  '<span class="label"> ${item.name ?? item.email}'
                  '</span>'
                  '</div>';
            })),
            options: [
              new MailBaseOption(email: 'nikola@tesla.com', name: 'Nikola Tesla'),
              new MailBaseOption(email: 'brian@thirdroute.com', name: 'Brian Reavis'),
              new MailBaseOption(email: 'c@a.com')
            ]));
  }

  NgSelectize(this.elelemtRef, this.zone) {
    print("construct");
  }
}

#Utility

  • jsRegExp(String regStr) create JS regexp
  • optionByValue(item_value) return OptValue by given value
  • List<OptValue> optionList(Options options) return list of OptValue

Note #

  • allowInterop is necessary for callback
  • angular2 select item change should wrap into zone
  • dart script must defer loading to wait javascript library ready
     <script defer type="application/dart" src="index.dart"></script>
  • Utils.isArray changed in selectize.js for chormium
  • $.isArray replaced to Array.isArray

test #

pub run test test/testCommon.dart -p dartium

Changelog #

0.2.1 #

  • update to dart2

0.1.6+1 #

  • remove dart 2 js transformer

0.1.6 #

  • add examples
  • fix getScoreFunction
  • add SortField
  • add Customize renderer on Grouping header

0.1.5 #

  • update selectize to 0.12.4
  • depreciate bootstrap function

0.1.4 #

update selectize to 0.12.3

0.1.3 #

  • Add 1.16 SDK support

0.1.2 #

  • remove transformers

0.1.1 #

  • Initial version, selectize wrapper

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  selectize: ^0.2.1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:selectize/selectize.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
13
Health:
Code health derived from static analysis. [more]
92
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
48
Learn more about scoring.

We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21

Platforms

Detected platforms: web, other

Primary library: package:selectize/selectize.dart with components: js.

Health suggestions

Fix lib/src/typedef.dart. (-3.93 points)

Analysis of lib/src/typedef.dart reported 8 hints, including:

line 2 col 33: Avoid shadowing type parameters.

line 2 col 35: Avoid shadowing type parameters.

line 4 col 36: Avoid shadowing type parameters.

line 4 col 38: Avoid shadowing type parameters.

line 4 col 41: Avoid shadowing type parameters.

Fix lib/src/configuration.dart. (-1.99 points)

Analysis of lib/src/configuration.dart reported 4 hints:

line 16 col 12: Avoid return types on setters.

line 22 col 12: Avoid return types on setters.

line 27 col 12: Avoid return types on setters.

line 221 col 12: Avoid return types on setters.

Fix lib/src/osSelectize.dart. (-1.99 points)

Analysis of lib/src/osSelectize.dart reported 4 hints:

line 4 col 9: Name libraries using lowercase_with_underscores.

line 49 col 1: Prefer using /// for doc comments.

line 179 col 1: Prefer using /// for doc comments.

line 216 col 11: Unnecessary new keyword.

Format lib/src/base.dart.

Run dartfmt to format lib/src/base.dart.

Maintenance issues and suggestions

Fix analysis_options.yaml.

The analyzer can't parse analysis_options.yaml.

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and selectize.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
js ^0.6.1+1 0.6.1+1
Dev dependencies
build_runner ^1.0.0
build_web_compilers ^0.4.4