selectize 0.1.6+1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 7

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.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.1.6+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';
  
Version Uploaded Documentation Archive
0.1.6+1 Jan 3, 2017 Go to the documentation of selectize 0.1.6+1 Download selectize 0.1.6+1 archive
0.1.6 Jan 1, 2017 Go to the documentation of selectize 0.1.6 Download selectize 0.1.6 archive
0.1.5 Dec 31, 2016 Go to the documentation of selectize 0.1.5 Download selectize 0.1.5 archive
0.1.4 Sep 18, 2016 Go to the documentation of selectize 0.1.4 Download selectize 0.1.4 archive
0.1.3 Apr 27, 2016 Go to the documentation of selectize 0.1.3 Download selectize 0.1.3 archive
0.1.2 Jan 25, 2016 Go to the documentation of selectize 0.1.2 Download selectize 0.1.2 archive
0.1.1 Jan 3, 2016 Go to the documentation of selectize 0.1.1 Download selectize 0.1.1 archive
0.1.0 Jan 2, 2016 Go to the documentation of selectize 0.1.0 Download selectize 0.1.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
14
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
7
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.9.0 <2.0.0