Use Selectize instead!

Author: robmadeyou

CHANGELONG.md

@@ -1,5 +1,8 @@
 #Changelog
 
+### 1.1.0
+    * Using Selectize for better ajax searchable inputs
+    
 ### 1.0.0
     * Refactored the Single select and multi select dropdowns
 

README.md

@@ -1 +1 @@
-Module.Leaf.Chosen
+Module.Leaf.Selectize

composer.json

@@ -1,20 +1,20 @@
 {
-  "name": "gcdtech/module-leaf-chosen",
-  "description": "Dropdowns and selections from the Chosen library",
+  "name": "gcdtech/module-leaf-selectize",
+  "description": "Dropdowns and selections from the Selectize library",
   "keywords": [
     "leaf",
     "mvp",
-    "chosen",
+    "selectize",
     "rhubarb",
     "php",
     "framework",
     "harvest"
   ],
-  "homepage": "https://github.com/GCDTech/Module.Leaf.Chosen",
+  "homepage": "https://github.com/GCDTech/Module.Leaf.Selectize",
   "license": "Apache-2.0",
   "autoload": {
     "psr-4": {
-      "Rhubarb\\Leaf\\Chosen\\": "src/"
+      "Rhubarb\\Leaf\\Selectize\\": "src/"
     }
   },
   "require": {

src/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDownView.php

@@ -1,13 +1,13 @@
 <?php
 
-namespace Rhubarb\Leaf\Chosen\Ajax\ChosenAjaxDropDown;
+namespace Rhubarb\Leaf\Selectize\Ajax\SelectizeAjaxDropDown;
 
 use Rhubarb\Crown\Events\Event;
-use Rhubarb\Leaf\Chosen\ChosenDropdown\ChosenDropdown;
+use Rhubarb\Leaf\Selectize\SelectizeDropdown\SelectizeDropdown;
 
-class ChosenAjaxDropDown extends ChosenDropdown
+class SelectizeAjaxDropDown extends SelectizeDropdown
 {
-    /** @var ChosenAjaxDropDownModel $model */
+    /** @var SelectizeAjaxDropDownModel $model */
     protected $model;
 
     /** @var Event $searchedEvent */
@@ -22,20 +22,20 @@ public function __construct($name = null)
 
     protected function getViewClass()
     {
-        return ChosenAjaxDropDownView::class;
+        return SelectizeAjaxDropDownView::class;
     }
 
     protected function createModel()
     {
-        return new ChosenAjaxDropDownModel();
+        return new SelectizeAjaxDropDownModel();
     }
 
     protected function onModelCreated()
     {
         parent::onModelCreated();
 
         $this->model->searchedEvent->attachHandler(function($searchQuery) {
-            $this->searchedEvent->raise($searchQuery);
+            return $this->searchedEvent->raise($searchQuery);
         });
     }
 }

src/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDownViewBridge.js

@@ -1,11 +1,11 @@
 <?php
 
-namespace Rhubarb\Leaf\Chosen\Ajax\ChosenAjaxDropDown;
+namespace Rhubarb\Leaf\Selectize\Ajax\SelectizeAjaxDropDown;
 
 use Rhubarb\Crown\Events\Event;
 use Rhubarb\Leaf\Controls\Common\SelectionControls\SelectionControlModel;
 
-class ChosenAjaxDropDownModel extends SelectionControlModel
+class SelectizeAjaxDropDownModel extends SelectionControlModel
 {
     public $searchedEvent;
 

…hosenAjaxDropDown/ChosenAjaxDropDown.php …zeAjaxDropDown/SelectizeAjaxDropDown.phpsrc/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDown.php renamed to src/Ajax/SelectizeAjaxDropDown/SelectizeAjaxDropDown.php src/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDown.php renamed to src/Ajax/SelectizeAjaxDropDown/SelectizeAjaxDropDown.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Rhubarb\Leaf\Selectize\Ajax\SelectizeAjaxDropDown;
+
+use Rhubarb\Leaf\Selectize\SelectizeDropdown\SelectizeDropdownView;
+
+class SelectizeAjaxDropDownView extends SelectizeDropdownView
+{
+    protected function getViewBridgeName()
+    {
+        return 'SelectizeAjaxDropDownViewBridge';
+    }
+
+    public function getViewBridgePath()
+    {
+        return __DIR__ . '/SelectizeAjaxDropDownViewBridge.js';
+    }
+}

…AjaxDropDown/ChosenAjaxDropDownModel.php …xDropDown/SelectizeAjaxDropDownModel.phpsrc/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDownModel.php renamed to src/Ajax/SelectizeAjaxDropDown/SelectizeAjaxDropDownModel.php src/Ajax/ChosenAjaxDropDown/ChosenAjaxDropDownModel.php renamed to src/Ajax/SelectizeAjaxDropDown/SelectizeAjaxDropDownModel.php

@@ -0,0 +1,47 @@
+rhubarb.vb.create('SelectizeAjaxDropDownViewBridge', function(parent) {
+    return {
+        attachEvents: function() {
+            var self = this;
+            this.currentRequest = null;
+            this.searchTimeout = null;
+
+            parent.attachEvents.call(this);
+
+            this.chosen.parent().find('.chosen-search-input').keyup(function(event) {
+                if (self.searchTimeout) {
+                    clearTimeout(self.searchTimeout);
+                }
+
+                var value = this.value;
+
+                self.searchTimeout = setTimeout(function() {
+                    if (value) {
+                        if (self.currentRequest) {
+                            self.currentRequest.abort();
+                        }
+
+                        self.currentRequest = self.raiseServerEvent('searched', value, function (response) {
+                            if (response && response instanceof Array && response.length) {
+                                self.updateSelectionItems(response, value);
+                            }
+
+                            self.currentRequest = null;
+                        });
+                    }
+                }, 150);
+            });
+        },
+        updateSelectionItems: function(response, value) {
+            var self = this;
+
+            self.viewNode.innerHTML = '';
+
+            $.map(response, function(item){
+                $(self.viewNode).append('<option value="' + item.value + '">' + item.name + '</option>');
+            });
+
+            $(this.viewNode).trigger("chosen:updated");
+            self.chosen.parent().find('.chosen-search-input').val(value);
+        }
+    };
+}, window.rhubarb.viewBridgeClasses.SelectizeLibraryViewBridge);

src/Ajax/SelectizeAjaxDropDown/SelectizeAjaxDropDownView.php

@@ -1,10 +1,10 @@
 <?php
 
-namespace Rhubarb\Leaf\Chosen\Ajax\ChosenAjaxMultiSelect;
+namespace Rhubarb\Leaf\Selectize\Ajax\SelectizeAjaxMultiSelect;
 
-use Rhubarb\Leaf\Chosen\Ajax\ChosenAjaxDropDown\ChosenAjaxDropDown;
+use Rhubarb\Leaf\Selectize\Ajax\SelectizeAjaxDropDown\SelectizeAjaxDropDown;
 
-class ChosenAjaxMultiSelect extends ChosenAjaxDropDown
+class SelectizeAjaxMultiSelect extends SelectizeAjaxDropDown
 {
     protected function supportsMultipleSelection()
     {