Because sometimes you need a typeahead

GrafiteInc · May 12, 2020 · 1b62658 · 1b62658
1 parent 1e92372
commit 1b62658
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 18 deletions.
diff --git a/src/Fields/Typeahead.php b/src/Fields/Typeahead.php
@@ -0,0 +1,91 @@
+<?php
+
+namespace Grafite\FormMaker\Fields;
+
+use Grafite\FormMaker\Fields\Field;
+
+class Typeahead extends Field
+{
+    /**
+     * Input type
+     *
+     * @return string
+     */
+    protected static function getType()
+    {
+        return 'text';
+    }
+
+    /**
+     * Input attributes
+     *
+     * @return array
+     */
+    protected static function getAttributes()
+    {
+        return [
+            'class' => 'typeahead form-control',
+        ];
+    }
+
+    /**
+     * Field maker options
+     *
+     * @return array
+     */
+    protected static function getOptions()
+    {
+        return [];
+    }
+
+    protected static function stylesheets($options)
+    {
+        return [
+            "//cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css",
+        ];
+    }
+
+    protected static function scripts($options)
+    {
+        return [
+            '//cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js'
+        ];
+    }
+
+    protected static function getTemplate()
+    {
+        return <<<EOT
+<div class="form-group row">
+    <label for="{id}" class="col-md-2 col-form-label">{name}</label>
+    <div class="col-md-10">
+        <div class="typeahead__container">
+            <div class="typeahead__field">
+                <div class="typeahead__query">{field}</div>
+            </div>
+        </div>
+    </div>
+    {errors}
+</div>
+EOT;
+    }
+
+    protected static function js($id, $options)
+    {
+        $values = $options['matches'];
+
+        return <<<EOT
+$.typeahead({
+    input: '.typeahead',
+    order: "desc",
+    source: {
+        data: $values
+    },
+    callback: {
+        onInit: function (node) {
+            console.log('Typeahead Initiated on ' + node.selector);
+        }
+    }
+});
+EOT;
+    }
+}
diff --git a/tests/FieldTest.php b/tests/FieldTest.php
@@ -1,32 +1,33 @@
 <?php
 
-use Grafite\FormMaker\Fields\Checkbox;
-use Grafite\FormMaker\Fields\CheckboxInline;
-use Grafite\FormMaker\Fields\Color;
-use Grafite\FormMaker\Fields\CustomFile;
+use Grafite\FormMaker\Fields\Url;
 use Grafite\FormMaker\Fields\Date;
-use Grafite\FormMaker\Fields\DatetimeLocal;
-use Grafite\FormMaker\Fields\Decimal;
+use Grafite\FormMaker\Fields\File;
+use Grafite\FormMaker\Fields\Text;
+use Grafite\FormMaker\Fields\Time;
+use Grafite\FormMaker\Fields\Week;
+use Grafite\FormMaker\Fields\Color;
 use Grafite\FormMaker\Fields\Email;
 use Grafite\FormMaker\Fields\Field;
-use Grafite\FormMaker\Fields\File;
-use Grafite\FormMaker\Fields\HasMany;
-use Grafite\FormMaker\Fields\HasOne;
-use Grafite\FormMaker\Fields\Hidden;
 use Grafite\FormMaker\Fields\Image;
 use Grafite\FormMaker\Fields\Month;
-use Grafite\FormMaker\Fields\Number;
-use Grafite\FormMaker\Fields\Password;
 use Grafite\FormMaker\Fields\Radio;
-use Grafite\FormMaker\Fields\RadioInline;
 use Grafite\FormMaker\Fields\Range;
+use Grafite\FormMaker\Fields\HasOne;
+use Grafite\FormMaker\Fields\Hidden;
+use Grafite\FormMaker\Fields\Number;
 use Grafite\FormMaker\Fields\Select;
-use Grafite\FormMaker\Fields\Telephone;
-use Grafite\FormMaker\Fields\Text;
+use Grafite\FormMaker\Fields\Decimal;
+use Grafite\FormMaker\Fields\HasMany;
+use Grafite\FormMaker\Fields\Checkbox;
+use Grafite\FormMaker\Fields\Password;
 use Grafite\FormMaker\Fields\TextArea;
-use Grafite\FormMaker\Fields\Time;
-use Grafite\FormMaker\Fields\Url;
-use Grafite\FormMaker\Fields\Week;
+use Grafite\FormMaker\Fields\Telephone;
+use Grafite\FormMaker\Fields\Typeahead;
+use Grafite\FormMaker\Fields\CustomFile;
+use Grafite\FormMaker\Fields\RadioInline;
+use Grafite\FormMaker\Fields\DatetimeLocal;
+use Grafite\FormMaker\Fields\CheckboxInline;
 
 class FieldTest extends TestCase
 {
@@ -261,4 +262,15 @@ public function testWeek()
         $this->assertEquals('field', array_key_first($field));
         $this->assertEquals('week', $field['field']['type']);
     }
+
+    public function testTypeahead()
+    {
+        $field = Typeahead::make('names', [
+            'matches' => json_encode(["Alfred", "Jarvis"])
+        ]);
+
+        $this->assertEquals('names', array_key_first($field));
+        $this->assertEquals(json_encode(["Alfred", "Jarvis"]), $field['names']['attributes']['matches']);
+        $this->assertStringContainsString('typeahead__container', $field['names']['template']);
+    }
 }