Integrated selectize with the location chooser.

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

@@ -20,6 +20,7 @@ use Jsvrcek\ICS\Model\Calendar;
 use Jsvrcek\ICS\Utility\Formatter;
 use Jsvrcek\ICS\CalendarStream;
 use Jsvrcek\ICS\CalendarExport;
+use Symfony\Component\HttpFoundation\AcceptHeader;
 
 /**
  * Location controller.
@@ -174,4 +175,51 @@ class LocationController extends Controller
 
         return $this->redirect($this->generateUrl('location_show', array('slug' => $location->slug)));
     }
+
+    /**
+     * 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(['l'])
+                ->from('CalciferBundle:Location', 'l')
+                ->where('lower(l.name) LIKE lower(:location)')
+                ->orderBy('l.name')
+                ->setParameter('location', sprintf('%%%s%%',$this->getRequest()->query->get('q')));
+
+            $entities = $qb->getQuery()->execute();
+
+            $locations = [];
+            foreach($entities as $location) {
+                /** @var Location $location */
+                $locations[] = array(
+                    'id' => $location->id,
+                    'name' => $location->name,
+                    'description' => \Michelf\Markdown::defaultTransform($location->description),
+                    'streetaddress' => $location->streetaddress,
+                    'streetnumber' => $location->streetnumber,
+                    'zipcode' => $location->zipcode,
+                    'city' => $location->city,
+                    'lon' => $location->lon,
+                    'lat' => $location->lat,
+                );
+            }
+
+
+            $response = new Response(json_encode($locations));
+            $response->headers->set('Content-Type', 'application/json');
+
+            return $response;
+        } else {
+            return $this->redirect('/');
+        }
+    }
 }

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

@@ -142,6 +142,53 @@ $(document).ready(function() {
         }
     });
 
+    $('#event_location').selectize({
+        create: true,
+        diacritics: true,
+        valueField: 'name',
+        labelField: 'name',
+        searchField: 'name',
+        maxItems: 1,
+        render: {
+            item: function(data,escape){
+                console.log([data,escape]);
+                return '<div class="ui green compact small label"><i class="map marker icon"></i>' + escape(data.name) + '</div>';
+            },
+            option: function(item, escape) {
+                return '<div class="ui fluid green card">' +
+                    '<div class="content">'+
+                        '<div class="header">' +
+                            '<i class="ui icon map marker"></i>' + escape(item.name) +
+                        '</div>' +
+                        '<div class="meta">'+
+                        (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+
+                (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+
+                        '</div>'+
+                        (item.description ? '<div class="description">' + item.description + '</div>' : '') +
+                    '</div>'+
+                '</div>';
+            }
+        },
+        load: function(query, callback) {
+            if (!query.length) return callback();
+            $.ajax({
+                url: "/orte/",
+                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');