selectize 0.1.6+1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 57

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

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

Analysis

We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
27 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70 / 100
Overall score:
Weighted score of the above. [more]
57
Learn more about scoring.

Platforms

Detected platforms: web, other

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

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use selectize.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

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

  • Use analysis_options.yaml.

    Rename old .analysis_options file to analysis_options.yaml.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.9.0 <2.0.0
browser ^0.10.0 0.10.0+3
func ^0.1.0 0.1.1 1.0.0
js ^0.6.0 0.6.1
Dev dependencies
angular2 ^2.1.0
dart_to_js_script_rewriter any
test ^0.12.10