This plugin allows to use selectize in lazy loading mode. So, it processes scroll event in dropdown and downloads options if scroll is in bottom of the dropdown.

alexsuhanov

lazyselectize

//this method extends custom selectizeJs to 

//give an ability to process sccroll event in dropdown and 

//download options if scroll is in bottom of the dropdown

$.fn.lazySelectize = function (settings) {

    self.loadItemsUrl = settings.loadItemsUrl;

    self.convertArrayToOptions = settings.convertArrayToOptions;

    if (settings.onDropdownClose === undefined) {

        settings.onDropdownClose = function() {

    if (settings.maxItems === undefined) {

    self.additionalUrlParams = settings.additionalUrlParams == undefined ? "" : settings.additionalUrlParams;

    settings.additionalUrlParams = self.additionalUrlParams;

    self.pageOffset = settings.pageOffset;

    self.disableScore = settings.disableScore;

    self.valueField = settings.valueField;

    settings.load = function(query, callback) {

            url: settings.loadItemsUrl + "?keyword=" + encodeURIComponent(query) + self.additionalUrlParams,

                self.selectize.clearOptions();

                self.selectize.refreshOptions(false);

                self.selectize.$dropdown_content.scrollTop(0);

                callback(settings.convertArrayToOptions(data));

    settings.onDropdownOpen = function($dropdown) {

        self.selectize.$dropdown_content.unbind("scroll");

        self.selectize.$dropdown_content.scroll(function() {

            if (self.selectize.getValue() == "") {

                self.processScroll(this);

        self.selectize.$dropdown_content.scroll(function () {

    var defaults = $.fn.selectize.defaults;

    var selectizeSettings = $.extend({}, defaults, settings);

    self.selectize = this.selectize()[0].selectize;

        self.selectize.sifter.getScoreFunction = function(query) {

    self.processScroll = function (obj) {

        self.selectize.$dropdown_content.unbind("keydown");

        self.scrollpos = self.selectize.$dropdown_content.scrollTop();

        if (self.runprocess &&( $(obj).scrollTop() + $(obj).innerHeight() >= obj.scrollHeight)) {

            self.selectize.$control.parent().addClass('loading');

            var keyword = self.isChanged ? self.selectize.lastQuery : "";

                url: self.loadItemsUrl + "?keyword=" + encodeURIComponent(keyword) + "&index=" + self.pageIndex + self.additionalUrlParams,

                success: function (data) {

                    var options = self.convertArrayToOptions(data);

                    for (var i = 0; i < options.length; i++) {

                        self.selectize.addOption(options[i]);

                    self.selectize.refreshOptions(false);

                    self.runprocess = true;

                    self.selectize.$control.parent().removeClass('loading');

                    self.selectize.$dropdown_content.scrollTop(self.scrollpos);

    self.reloadOptionsData = function() {

    self.reloadOptionsData = function(callback) {

            url: self.loadItemsUrl + "?keyword=" + encodeURIComponent("") + "&index=" + self.pageIndex + self.additionalUrlParams,

                var options = self.convertArrayToOptions(data);

                for (var i = 0; i < options.length; i++) {

                    self.selectize.addOption(options[i]);

                self.selectize.$control.parent().removeClass('loading');

                self.selectize.$dropdown_content.scrollTop(self.scrollpos);

                if (callback != undefined) {

    $(self.selectize.$control_input[0]).on('keydown', function () {

Selectize.prototype['trigger'] = function (event /* , args... */) {

    if (event in this._events === false) return;

    for (var i = 0; this._events != undefined && i < this._events[event].length; i++) {

        this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1));

		<th valign="top" colspan="4" align="left"><a href="#general" name="general">General </a></th>

		<th valign="top" width="120px" align="left">Option</th>

		<th valign="top" align="left">Description</th>

		<th valign="top" width="60px" align="left">Default</th>

		<td valign="top"><code>loadItemsUrl</code></td>

		<td valign="top">An url to download selectize dropdown options. Necessary url parameters:

				index - number of data portion(Start value: 0. Each time when scroll moves down it increases by 1)

		<td valign="top"><code>url, required</code></td>

		<td valign="top"><code>disableScore</code></td>

		<td valign="top">If true, selectize score function will be disabled. Dropdown items order will be defined in your server method. 

		<td valign="top"><code>false</code></td>

		<th valign="top" colspan="4" align="left"><a href="#general" style="color: red" name="general">Non-configurable options </a></th>

		<th valign="top" colspan="3" align="left">Description</th>

		<td valign="top"><code>load(callback, query)</code></td>

		<td  colspan="3">Invoked when new options should be loaded from the server. Defined in lazyselectize.js</td>

		<td valign="top"><code>onDropdownOpen($dropdown)</code></td>

		<td colspan="3">Invoked when the dropdown opens. Defined in lazyselectize.js</td>

  "description": "This plugin allows to use selectize in lazy loading mode. So, it processes scroll event in dropdown and downloads options if scroll is in bottom of the dropdown.",

    "test": "echo \"Error: no test specified\" && exit 1"

    "url": "git+https://github.com/servicechannel/selectize.git"

    "url": "https://github.com/servicechannel/selectize/issues"

  "homepage": "https://github.com/servicechannel/selectize#readme",

    "karma-phantomjs-launcher": "^0.1.4",

[![NPM version](http://img.shields.io/npm/v/lazyselectize.svg?style=flat)](https://www.npmjs.org/package/lazyselectize)

Lazyselectize is an extensible [selectize](https://www.npmjs.com/package/selectize)-based custom &lt;select&gt; UI control. It allows to process scroll event in dropdown and download options if scroll is in bottom of the dropdown

- Features inherited from [selectize](https://www.npmjs.com/package/selectize)

- [jquery](https://github.com/jquery/jquery) (1.7 and greater)

- [selectize](https://www.npmjs.com/package/selectize)

All pre-built files needed to use Selectize can be found in the ["dist"](dist/js) folder.

	- [selectize.js](dist/js/selectize.js) — With dependencies, minus jquery

	- [lazyselectize.js](dist/js/lazyselectize.js)

	- [selectize styles](https://www.npmjs.com/package/selectize)

The available selectize options are [documented here](https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md).  Options object may include both selectize and lazyselectize options.

The available lazyselectize options are [documented here](docs/usage.md)

To support Internet Explorer 8, [es5-shim](https://github.com/kriskowal/es5-shim/) must be added your page.

		{
		"name": "lazyselectize",
		"version": "1.0.9",
		"version": "1.0.10",
		"description": "This plugin allows to use selectize in lazy loading mode. So, it processes scroll event in dropdown and downloads options if scroll is in bottom of the dropdown.",
		@@ -5,0 +5,0 @@ "main": "dist/js/lazyselectize.js",

New alerts

Fixed alerts

Improved metrics

		@@ -51,6 +51,4 @@ //this method extends custom selectizeJs to

		self.selectize.$dropdown_content.scroll(function() {
		if (self.selectize.getValue() == "") {
		self.processScroll(this);
		}
		self.selectize.$dropdown_content.scroll(function () {
		self.processScroll(this);
		});
		@@ -99,3 +97,3 @@ };

		self.reloadOptionsData = function() {
		self.reloadOptionsData = function(callback) {
		$.ajax({
		@@ -117,2 +115,5 @@ url: self.loadItemsUrl + "?keyword=" + encodeURIComponent("") + "&index=" + self.pageIndex + self.additionalUrlParams,
		self.selectize.$dropdown_content.scrollTop(self.scrollpos);
		if (callback != undefined) {
		callback();
		}
		}
		@@ -119,0 +120,0 @@ });