Typeahead for tags with selectize.

Fixes #12

src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php

@@ -26,6 +26,7 @@ use Jsvrcek\ICS\CalendarStream;
 use Jsvrcek\ICS\CalendarExport;
 use Symfony\Component\Validator\Constraints\DateTime;
 use Doctrine\ORM\Query\ResultSetMappingBuilder;
+use Symfony\Component\HttpFoundation\AcceptHeader;
 
 /**
  * Tag controller.
@@ -170,4 +171,44 @@ EOF;
             );
         }
     }
+
+    /**
+     * Finds and displays a Event entity.
+     *
+     * @Route("/")
+     * @Method("GET")
+     */
+    public function indexAction() {
+        $accepts = AcceptHeader::fromString($this->getRequest()->headers->get('Accept'));
+        if ($accepts->has('application/json')) {
+            $em = $this->getDoctrine()->getManager();
+
+            /** @var QueryBuilder $qb */
+            $qb = $em->createQueryBuilder();
+            $qb->select(['t'])
+                ->from('CalciferBundle:Tag', 't')
+                ->where('t.name LIKE :tag')
+                ->orderBy('t.name')
+                ->setParameter('tag', sprintf('%%%s%%',strtolower($this->getRequest()->query->get('q'))));
+
+            $entities = $qb->getQuery()->execute();
+
+            $tags = [];
+            foreach($entities as $tag) {
+                /** @var Tag $tag */
+                $tags[] = [
+                    'id' => $tag->id,
+                    'name' => $tag->name,
+                ];
+            }
+
+
+            $response = new Response(json_encode($tags));
+            $response->headers->set('Content-Type', 'application/json');
+
+            return $response;
+        } else {
+            return $this->redirect('/');
+        }
+    }
 }

src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js

@@ -110,6 +110,38 @@ $(document).ready(function() {
         calcBoxSize(4);
     }
 
+    $('#event_tags').selectize({
+	    create: true,
+        diacritics: true,
+        valueField: 'name',
+        labelField: 'name',
+        searchField: 'name',
+	    render: {
+    	    item: function(data,escape){
+        		console.log([data,escape]);
+        		return '<div class="ui green compact small label"><i class="tag icon"></i>' + escape(data.name) + '</div>';
+    	    }
+    	},
+        load: function(query, callback) {
+            if (!query.length) return callback();
+            $.ajax({
+                url: "/tags/",
+                type: "GET",
+                dataType: 'json',
+                data: {
+                    q: query
+                },
+                error: function() {
+                  callback();
+                },
+                success: function(res) {
+                    console.log(res);
+                    callback(res);
+                }
+            });
+        }
+    });
+
     if (view_map_selector.length == 1) {
         jQuery('.show_map').click(addGeoCoordinates);
         map = L.map('view-map');
@@ -146,4 +178,4 @@ $(document).ready(function() {
             }
         }).modal('attach events', '.show_map', 'show');
     }
-});
+});

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig

@@ -4,18 +4,22 @@
     {% stylesheets filter="compass"
     "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss"
     "@CalciferBundle/Resources/assets/css/events.scss"
-    "@CalciferBundle/Resources/assets/css/leaflet.scss" %}
+    "@CalciferBundle/Resources/assets/css/leaflet.scss"
+    %}
     <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
+    <link rel="stylesheet" href="/vendor/selectize.js/dist/css/selectize.css"/>
 {% endblock %}
 
 {% block javascripts %}
     {% javascripts
     "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
     "@CalciferBundle/Resources/assets/js/events.js"
-    "@CalciferBundle/Resources/assets/js/leaflet.js" %}
-    <script src="{{ asset_url }}"></script>
+    "@CalciferBundle/Resources/assets/js/leaflet.js"
+    %}
+    <script src="{{ asset_url }}"></script>    
     {% endjavascripts %}
+    <script src="/vendor/selectize.js/dist/js/standalone/selectize.js"></script>
 {% endblock %}
 
 {% block body -%}