Native search: adapt template, views and javascript

12 files changed, 254 insertions, 70 deletions

diff --git a/chimere/forms.py b/chimere/forms.py
index 2182a09..4685144 100644
--- a/chimere/forms.py
+++ b/chimere/forms.py
@@ -834,9 +834,10 @@ class AreaForm(AreaAdminForm):
         model = Area
         exclude = []
 
+
 CHIMERE_ROUTING_TRANSPORT = []
 ROUTING_INIT = None
-if hasattr(settings, 'CHIMERE_ROUTING_TRANSPORT'):
+if getattr(settings, 'CHIMERE_ROUTING_TRANSPORT', None):
     CHIMERE_ROUTING_TRANSPORT = [
         (idx, _(lbl)) for idx, lbl in settings.CHIMERE_ROUTING_TRANSPORT]
     if CHIMERE_ROUTING_TRANSPORT:
@@ -863,13 +864,11 @@ class RoutingForm(forms.Form):
                     ("%s_%d" % (transport, speed), _(lbl)))
 
 
-SearchForm = None
+class SearchForm(forms.Form):
+    q = forms.CharField(required=False, label=_('Search'),
+                        widget=forms.TextInput(attrs={'type': 'search'}))
 
 
 if getattr(settings, 'HAYSTACK_SEARCH_ENGINE', None):
     class SearchForm(HaystackSearchForm):
         pass
-else:
-    # TODO SEARCH
-    pass
-
diff --git a/chimere/models.py b/chimere/models.py
index 4faf42b..07a2967 100644
--- a/chimere/models.py
+++ b/chimere/models.py
@@ -38,7 +38,8 @@ from django import forms
 from django.conf import settings
 from django.contrib.auth.models import User, Permission, ContentType, Group
 from django.contrib.gis.db import models
-from django.contrib.postgres.search import SearchVectorField, SearchVector
+from django.contrib.postgres.search import SearchVectorField, SearchVector, \
+    SearchQuery
 from django.core.files import File
 from django.core.exceptions import ObjectDoesNotExist
 from django.core.urlresolvers import reverse
@@ -264,8 +265,6 @@ class Icon(models.Model):
 
 
 class SubCategory(models.Model):
-    '''Sub-category
-    '''
     category = models.ForeignKey(Category, verbose_name=_("Category"),
                                  related_name='subcategories')
     name = models.CharField(_("Name"), max_length=150)
@@ -316,10 +315,11 @@ class SubCategory(models.Model):
 
     @classmethod
     def getAvailable(cls, item_types=None, area_name=None, public=False,
-                     instance=False):
-        '''Get list of tuples with first the category and second the associated
+                     instance=False, area=None):
+        """
+        Get list of tuples with first the category and second the associated
         subcategories
-        '''
+        """
         sub_categories = {}
         subcategories = cls.objects.filter(category__available=True)
         if not item_types:
@@ -331,6 +331,7 @@ class SubCategory(models.Model):
         selected_cats = []
         if area_name:
             area = Area.objects.get(urn=area_name)
+        if area:
             # if there some restrictions with categories limit them
             if area.subcategories.count():
                 sub_ids = [sub.id for sub in area.subcategories.all()]
@@ -388,8 +389,9 @@ class SubCategory(models.Model):
         return items
 
     def getJSON(self, categories_id=[]):
-        '''Return a JSON string - mainly used to get description
-        '''
+        """
+        Return a JSON string - mainly used to get description
+        """
         json_string = json.dumps(self.getJSONDict())
         return json_string
 
@@ -845,6 +847,29 @@ class GeographicItem(models.Model):
             (max_weight - self.weight or 0) /
             (float((max_weight - min_weight)) or 1), 5)
 
+    @classmethod
+    def getGeoJSONs(self, queryset, limit_to_categories=[]):
+        raise NotImplementedError()
+
+    @classmethod
+    def search(cls, query, area=None, get_json=False):
+        """
+        Search items using search_vector
+
+        :param query: terms to search
+        :param area: area limitation (default None)
+        :param get_json: output as json if True else return a queryset
+        :return: items matching the search query and the area
+        """
+        subcats = SubCategory.getAvailable(instance=True, area=area)
+        q = cls.objects.filter(categories__in=subcats,
+                               search_vector=SearchQuery(
+                                   query,
+                                   config=settings.CHIMERE_SEARCH_LANGUAGE))
+        if get_json:
+            return cls.getGeoJSONs(q)
+        return q
+
 
 def weighted_post_save(sender, **kwargs):
     if not kwargs['instance']:
@@ -1147,8 +1172,9 @@ class Polygon(GeographicItem):
         verbose_name = _("Polygon")
 
     def getGeoJSON(self, color="#000", inner_color='#0F0'):
-        '''Return a GeoJSON string
-        '''
+        """
+        Return a GeoJSON string
+        """
         try:
             geom = json.loads(self.polygon.geojson)
         except json.JSONDecodeError:
@@ -1938,8 +1964,7 @@ class Area(models.Model, SimpleArea):
 
     @classmethod
     def getAvailable(cls):
-        '''Get available areas
-        '''
+        # Get available areas
         return cls.objects.filter(available=True)
 
     def getWkt(self):
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 223425e..026027d 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -286,7 +286,7 @@ function transformCoordToLonLat(coord) {
         };
         var settings = {};
     /*
-    * Publics methods
+    * Public methods
     */
     var methods = {
         /*
@@ -602,7 +602,7 @@ function transformCoordToLonLat(coord) {
                 source: settings[map_id].sourceVectors
             });
             settings[map_id].map.addLayer(settings[map_id].layerVectors);
-            if (settings[map_id].edition) methods.activateEdition(map_id);
+            if (settings[map_id].edition) methods._activateEdition(map_id);
 
             // OL3-deprecated settings[map_id].layerVectors.setOpacity(0.8);
             /* OL3-deprecated-routing
@@ -670,7 +670,8 @@ function transformCoordToLonLat(coord) {
             if (!settings[map_id].edition){
                 methods.loadCategories(map_id, function(){
                     if (settings[map_id].permalink) {
-                        post_load_helper = methods._param_map_from_permalink();
+                        post_load_helper =
+                            methods._param_map_from_permalink(map_id);
                     }
                     methods.loadGeoObjects(map_id, post_load_helper);
                 });
@@ -855,7 +856,7 @@ function transformCoordToLonLat(coord) {
             $("#permalink").attr('href', uri + "#" + settings[map_id].permalink);
             return settings[map_id].permalink
         },
-        _param_map_from_permalink: function(){
+        _param_map_from_permalink: function(map_id){
             var items = settings[map_id].permalink.split(';');
 
             var view = settings[map_id].map.getView();
@@ -950,7 +951,7 @@ function transformCoordToLonLat(coord) {
             var current_feature = items[4];
             var post_load_helper = function(){
                 if (current_feature){
-                    methods.showPopup(current_feature);
+                    methods._showPopup(map_id, current_feature);
                 }
                 settings[map_id].layerDbFeatures.dispatchEvent('change');
                 settings[map_id].clusterLayer.dispatchEvent('change');
@@ -1020,7 +1021,7 @@ function transformCoordToLonLat(coord) {
             };
             settings[map_id]._reload_on_move();
         },
-        deactivateEdition: function(map_id){
+        _deactivateEdition: function(map_id){
             settings[map_id].edition = false;
             if (typeof settings[map_id].features != 'undefined'){
                 settings[map_id].map.removeInteraction(settings[map_id].draw);
@@ -1028,7 +1029,15 @@ function transformCoordToLonLat(coord) {
                 settings[map_id].editionSource.clear();
             }
         },
-        activateEdition: function(map_id, new_edition_type){
+        deactivateEdition: function(){
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("deactivateEdition - Public method only");
+                return;
+            }
+            methods._deactivateEdition(map_id);
+        },
+        _activateEdition: function(map_id, new_edition_type){
             settings[map_id].edition = true;
             if (new_edition_type) settings[map_id].edition_type = new_edition_type;
 
@@ -1098,6 +1107,14 @@ function transformCoordToLonLat(coord) {
             });
             settings[map_id].modify_activated = false;
         },
+        activateEdition: function(new_edition_type){
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("activateEdition - Public method only");
+                return;
+            }
+            methods._activateEdition(map_id, new_edition_type);
+        },
         enableClustering: function(map_id){
             // Style clusters and hide items inside clusters
             settings[map_id]._styleCache = {};
@@ -1432,7 +1449,7 @@ function transformCoordToLonLat(coord) {
         zoomIn: function(){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("zoomIn - Public method only");
                 return;
             }
             v = settings[map_id].map.getView();
@@ -1460,7 +1477,7 @@ function transformCoordToLonLat(coord) {
         zoomOut: function(){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("zoomOut - Public method only");
                 return;
             }
             v = settings[map_id].map.getView();
@@ -1540,20 +1557,28 @@ function transformCoordToLonLat(coord) {
             }
         },
         */
-        loadMarker: function(object_id, open_popup) {
+        _loadMarker: function(map_id, object_id, open_popup) {
             var uri = extra_url + "get-marker/" + object_id;
             $.ajax({url: uri,
                     dataType: "json",
                     success: function (data) {
                         var c_feat = null;
                         for (idx in data){
-                            c_feat = methods.addMarker(map_id, data[idx]);
+                            c_feat = methods._addMarker(map_id, data[idx]);
                         }
                         if (c_feat && open_popup != 'undefined' && open_popup)
                             methods.openPopup(map_id, c_feat);
                     }
             });
         },
+        loadMarker: function(object_id, open_popup) {
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("loadMarker - Public method only");
+                return;
+            }
+            methods._loadMarker(map_id, object_id, open_popup);
+        },
         /*
         * Load markers and route from DB
         */
@@ -1599,7 +1624,7 @@ function transformCoordToLonLat(coord) {
                         for (var i = 0; i < data.features.length; i++) {
                             var feature = data.features[i];
                             if (feature.geometry.type == 'Point'){
-                                var iconFeature = methods.addMarker(map_id, feature);
+                                var iconFeature = methods._addMarker(map_id, feature);
                             } else if (feature.geometry.type == 'Polygon') {
                                 methods.addPolygon(map_id, feature);
                             } else if (feature.geometry.type == 'MultiPolygon') {
@@ -1635,7 +1660,12 @@ function transformCoordToLonLat(coord) {
                 });
         },
         razMap: function() {
-            methods.hidePopup();
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("razMap - Public method only");
+                return;
+            }
+            methods._hidePopup(map_id);
             methods.uncheckCategories();
             settings[map_id].dbFeatures.clear();
             settings[map_id].vectors.clear();
@@ -1898,7 +1928,7 @@ function transformCoordToLonLat(coord) {
         activateDraw: function (){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("activateDraw - Public method only");
                 return;
             }
             settings[map_id].map.addInteraction(settings[map_id].draw);
@@ -1909,7 +1939,7 @@ function transformCoordToLonLat(coord) {
         activateModify: function (){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("activateModify - Public method only");
                 return;
             }
             settings[map_id].map.addInteraction(settings[map_id].modify);
@@ -1918,7 +1948,7 @@ function transformCoordToLonLat(coord) {
         deactivateDraw: function (){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("deactivateDraw - Public method only");
                 return;
             }
             if (settings[map_id].draw_activated){
@@ -1957,7 +1987,7 @@ function transformCoordToLonLat(coord) {
         /*
         * Put a marker on the map
         */
-        addMarker: function (map_id, mark) {
+        _addMarker: function (map_id, mark) {
             /*
             * Default Feature configuration
             * This can be overrided in on_marker_click, using settings[map_id].current_feature
@@ -2158,6 +2188,14 @@ function transformCoordToLonLat(coord) {
             return feature;
             */
         },
+        addMarker: function (mark) {
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("addMarker - Public method only");
+                return;
+            }
+            return methods._addMarker(map_id, mark);
+        },
 
         //LIB iOS
         connectWebViewJavascriptBridge: function(callback) {
@@ -2179,7 +2217,7 @@ function transformCoordToLonLat(coord) {
         addJSON: function(json_url, title, projection, style){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("addJSON - Public method only");
                 return;
             }
 
@@ -2968,7 +3006,7 @@ function transformCoordToLonLat(coord) {
 
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("zoom - Public method only");
                 return;
             }
 
@@ -3093,7 +3131,7 @@ function transformCoordToLonLat(coord) {
         putEditMarker: function (latlon, zoom){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("putEditMarker - Public method only");
                 return;
             }
             if (settings[map_id].features.getLength()) settings[map_id].features.pop();
@@ -3242,35 +3280,34 @@ function transformCoordToLonLat(coord) {
             var bounds = settings[map_id].layerVectors.getDataExtent();
             if (bounds) settings[map_id].map.zoomToExtent(bounds);
         },
-        showPopup: function (feature_pk) {
+        _showPopup: function (map_id, feature_pk){
             var feats = settings[map_id].dbFeatures.getArray();
             for (j in feats){
                 var c_marker = feats[j];
                 if (c_marker.getProperties()['key'] == feature_pk){
-                    //for (j in c_marker) console.log(j + ": "+ c_marker[j]);
-                    //c_marker.events.triggerEvent('click');
                     methods.openPopup(map_id, c_marker);
                     return true
                 }
             }
             // only manage marker for now
             if (feature_pk.substring(0, 7) == "marker-"){
-                var feat = methods.loadMarker(feature_pk.substring(7), true);
+                var feat = methods._loadMarker(map_id, feature_pk.substring(7),
+                                               true);
             }
             return false;
-            //feature.markerClick();
-            //OpenLayers.Popup.popupSelect.clickFeature(feature);
-            /*
-            settings[map_id].current_popup = feature.marker._popup();
-            if (!settings[map_id].current_popup.visible()){
-                settings[map_id].current_popup.show();
-                methods.display_feature_detail(feature.pk);
-            }*/
+        },
+        showPopup: function (feature_pk) {
+            var map_id = methods.map_id(this);
+            if (!map_id){
+                alert("showPopup - Public method only");
+                return;
+            }
+            return methods._showPopup(map_id, feature_pk);
         },
         hidePopup: function () {
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("hidePopup - Public method only");
                 return;
             }
             methods._hidePopup(map_id);
@@ -3293,7 +3330,7 @@ function transformCoordToLonLat(coord) {
         refresh: function(){
             var map_id = methods.map_id(this);
             if (!map_id){
-                alert("Public method only");
+                alert("refresh - Public method only");
                 return;
             }
             settings[map_id].map.updateSize();
diff --git a/chimere/static/chimere/js/search.js b/chimere/static/chimere/js/search.js
index 429056e..97bba43 100644
--- a/chimere/static/chimere/js/search.js
+++ b/chimere/static/chimere/js/search.js
@@ -16,6 +16,9 @@ function haystack_search(evt, page){
 
     var value = $('#id_q').val().replace(/#/g , "%23");
     var c_url = search_url + "?q=" + value;
+    if ($('#id_area').val()){
+        c_url += "&area=" + $('#id_area').val();
+    }
     if (page){
         c_url += '&page=' + page;
     }
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index 610487b..3d85cc9 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -29,7 +29,7 @@
     var has_search = {% if has_search %}true{% else %}false{% endif %};
     // array to keep trace of already displayed items
     var search_result = new Array();
-    var search_url = "/search/";
+    var search_url = "{% url 'chimere:search' area_name %}";
     $(function(){
         if (has_search){
             load_search_box();
diff --git a/chimere/templates/search/search.html b/chimere/templates/search/search.html
index b7e6d69..e2f7619 100644
--- a/chimere/templates/search/search.html
+++ b/chimere/templates/search/search.html
@@ -1,4 +1,4 @@
-{% load url from future %}{% load i18n %}
+{% load i18n %}
 <script type='text/javascript'>
 var do_you_mean = "{% trans 'Do you mean: ' %}";
 var end_do_you_mean = "{% trans '?' %}";
@@ -7,11 +7,11 @@ var end_do_you_mean = "{% trans '?' %}";
 {% include "search/search_js.html" %}
 <div id='search-listing'>
   <ul>
-{% for result in page.object_list %}{% if result.object %}
+{% for result in results %}
     <li>
-        <img src='{{MEDIA_URL}}{{result.object.default_category.icon.image}}'/><a href="#" onclick="$('#main-map').chimere('showPopup', '{{result.object.full_id}}');return false;">{{ result.object }}</a>
+        <img src='{{MEDIA_URL}}{{result.properties.icon_path}}'/><a href="#" onclick="$('#main-map').chimere('showPopup', '{{result.properties.key}}');return false;">{{ result.properties.name }}</a>
     </li>
-{% endif %}{% empty %}
+{% empty %}
     <li>{% trans "No results found." %}</li>
 {% endfor %}
   </ul>
@@ -30,6 +30,7 @@ var end_do_you_mean = "{% trans '?' %}";
 {% else %}
 <form id='search-form' class='autocomplete-me'>
     <input type="text" id="id_q" name="q" autocomplete="off"/>
+    <input type="hidden" id="id_area" name="area" value="{{area_name}}"/>
     <button name='haystack-search' id='haystack-search' type='button' class="btn btn-default"><span class='action-label'>{% trans "Search" %} </span><span class="glyphicon glyphicon-search"></span></button>
 </form>
 <div id='spelling'></div>
diff --git a/chimere/templates/search/search_haystack.html b/chimere/templates/search/search_haystack.html
new file mode 100644
index 0000000..c47de59
--- /dev/null
+++ b/chimere/templates/search/search_haystack.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+<script type='text/javascript'>
+var do_you_mean = "{% trans 'Do you mean: ' %}";
+var end_do_you_mean = "{% trans '?' %}";
+</script>
+{% if query %}
+{% include "search/search_haystack_js.html" %}
+<div id='search-listing'>
+  <ul>
+{% for result in page.object_list %}{% if result.object %}
+    <li>
+        <img src='{{MEDIA_URL}}{{result.object.default_category.icon.image}}'/><a href="#" onclick="$('#main-map').chimere('showPopup', '{{result.object.full_id}}');return false;">{{ result.object }}</a>
+    </li>
+{% endif %}{% empty %}
+    <li>{% trans "No results found." %}</li>
+{% endfor %}
+  </ul>
+</div>
+{% if page.has_previous or page.has_next %}
+    <div id='search-nav'>
+    <nav>
+      <ul class="pager">
+        {% if page.has_previous %}<li class="previous"><a href="#" onclick="haystack_search(this, {{ page.previous_page_number }});">&larr; {% trans "Previous" %}</a></li>{% endif %}
+        {% if page.has_next %}<li class="next"><a href="#" onclick="haystack_search(this, {{ page.next_page_number }});">{% trans "More results..." %} &rarr;</a></li>{% endif %}
+      </ul>
+    </nav>
+    </div>
+{% endif %}
+
+{% else %}
+<form id='search-form' class='autocomplete-me'>
+    <input type="text" id="id_q" name="q" autocomplete="off"/>
+    <button name='haystack-search' id='haystack-search' type='button' class="btn btn-default"><span class='action-label'>{% trans "Search" %} </span><span class="glyphicon glyphicon-search"></span></button>
+</form>
+<div id='spelling'></div>
+<div id='search-result'></div>
+<script type='text/javascript'>
+no_result_message = "{% trans 'No exact match.' %}";
+$(function(){
+    $('#haystack-search').click(
+        function(evt){
+            $("#main-map").chimere("razMap");
+            haystack_search(evt);
+    });
+    {% if autocomplete %}
+    window.autocomplete = new Autocomplete({
+        form_selector: '.autocomplete-me'
+    });
+    window.autocomplete.setup();{% endif %}
+});
+</script>
+{% endif %}
diff --git a/chimere/templates/search/search_haystack_js.html b/chimere/templates/search/search_haystack_js.html
new file mode 100644
index 0000000..7a793f0
--- /dev/null
+++ b/chimere/templates/search/search_haystack_js.html
@@ -0,0 +1,27 @@
+<script type='text/javascript'>
+$(function(){
+    // clean checked categories
+    $('.subcategory').each(function(){ $(this).removeClass('selected'); });
+    $('.subcategory input[type=checkbox]').attr('checked', false);
+
+    var geo_objects = [];
+    {% for result in page.object_list %}{% if result %}
+    var c_lst ={{result.object.getGeoJSON|safe}};
+    for (idx in c_lst){
+        geo_objects.push(c_lst[idx]);
+    }{% endif %}{% endfor %}
+    var geo_features = {};
+    for (idx=0 ; idx < geo_objects.length ; idx++){
+        var c_idx = geo_objects[idx].properties.pk;
+        if (search_result.indexOf(c_idx) == -1){
+            search_result.push(c_idx);
+            geo_features[c_idx] = $('#main-map').chimere('addMarker',
+                                                         geo_objects[idx]);
+        }
+    }
+    if (geo_objects.length){
+        window.setTimeout(function(){$("#main-map").chimere("zoomToMarkerExtent")}, 500);
+    }
+});
+</script>
+
diff --git a/chimere/templates/search/search_js.html b/chimere/templates/search/search_js.html
index 7a793f0..41771c2 100644
--- a/chimere/templates/search/search_js.html
+++ b/chimere/templates/search/search_js.html
@@ -5,16 +5,20 @@ $(function(){
     $('.subcategory input[type=checkbox]').attr('checked', false);
 
     var geo_objects = [];
-    {% for result in page.object_list %}{% if result %}
-    var c_lst ={{result.object.getGeoJSON|safe}};
+    {% if results %}
+    var c_lst ={{results|safe}};
     for (idx in c_lst){
         geo_objects.push(c_lst[idx]);
-    }{% endif %}{% endfor %}
+    }{% endif %}
     var geo_features = {};
     for (idx=0 ; idx < geo_objects.length ; idx++){
         var c_idx = geo_objects[idx].properties.pk;
         if (search_result.indexOf(c_idx) == -1){
             search_result.push(c_idx);
+            for (k in geo_objects[idx]){
+                alert(k);
+                alert(geo_objects[idx][k]);
+            }
             geo_features[c_idx] = $('#main-map').chimere('addMarker',
                                                          geo_objects[idx]);
         }
diff --git a/chimere/urls.py b/chimere/urls.py
index 208a1d3..e7d1a97 100644
--- a/chimere/urls.py
+++ b/chimere/urls.py
@@ -81,15 +81,17 @@ if getattr(settings, 'HAYSTACK_SEARCH_ENGINE', None):
     urlpatterns += [
         url(r'^search/?$', search_view_factory(
             view_class=SearchView,
-            template='search/search.html',
+            template='search/search_haystack.html',
             form_class=SearchForm
-        ), name='haystack_search'),
+        ), name='search'),
         url(r'^search/autocomplete/$', views.autocomplete,
             name='autocomplete-search')
     ]
 else:
-    # TODO SEARCH
-    pass
+    urlpatterns += [
+        url(r'^(?:(?P<area_name>[a-zA-Z0-9_-]+)/)?search/?$',
+            views.SearchView.as_view(), name='search'),
+    ]
 
 urlpatterns += [
     url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?dyn/(?P<page_id>\w+)/$',
diff --git a/chimere/views.py b/chimere/views.py
index 83b0b28..ee27d26 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -39,7 +39,7 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.template import defaultfilters
 from django.utils.http import urlquote
 from django.utils.translation import ugettext as _
-from django.views.generic import TemplateView, ListView
+from django.views.generic import TemplateView, ListView, FormView
 
 from chimere.actions import actions
 from chimere import models
@@ -1273,7 +1273,44 @@ def property_choice_list(request, area_name='', property_slug=''):
                         content_type="application/json")
 
 
-SearchView = None
+class SearchView(FormView):
+    template_name = 'search/search.html'
+    form_class = forms.SearchForm
+    results_per_page = settings.SEARCH_RESULTS_PER_PAGE
+
+    def get_results(self, query, area=None):
+        results = []
+        for model in [models.Marker, models.Route, models.Polygon]:
+            results += model.search(query, area=area, get_json=True)
+        return results
+
+    def get_context_data(self, **kwargs):
+        context = super(SearchView, self).get_context_data(**kwargs)
+        area, area_name = get_area(self.kwargs.get('area_name', None))
+        query, results = None, []
+        if "q" in self.request.GET:
+            query = self.request.GET['q']
+            results = self.get_results(query, area)
+        context.update({
+            'query': query,
+            'results': results,
+            'area_name': area_name
+        })
+        # (paginator, page) = self.build_page()
+
+        # context.update({ 'query': self.query, })
+
+        """
+        if self.results and hasattr(self.results, 'query') and self.results.query.backend.include_spelling:
+            context['suggestion'] = self.form.get_suggestion()
+
+        context.update(self.extra_context())
+        """
+
+        return context
+
+
+
 autocomplete = None
 
 if getattr(settings, 'HAYSTACK_SEARCH_ENGINE', None):
@@ -1304,6 +1341,3 @@ if getattr(settings, 'HAYSTACK_SEARCH_ENGINE', None):
             'spelling': spelling,
         })
         return HttpResponse(the_data, content_type='application/json')
-else:
-    # TODO SEARCH
-    pass
diff --git a/settings.py b/settings.py
index 42eaa4a..eadf6e4 100644
--- a/settings.py
+++ b/settings.py
@@ -151,7 +151,7 @@ HAYSTACK_CONNECTIONS = {
         'INCLUDE_SPELLING': True,
     },
 }
-HAYSTACK_SEARCH_RESULTS_PER_PAGE = 12
+SEARCH_RESULTS_PER_PAGE = HAYSTACK_SEARCH_RESULTS_PER_PAGE = 12
 HAYSTACK_AUTOCOMPLETE = False
 
 # length of short description