First try at autocomplete
authorveltr
Fri, 20 Apr 2012 10:51:34 +0200
changeset 175 ebc92daef815
parent 174 ca6382096bb1
child 176 ec356aa158a1
First try at autocomplete
web/hdalab/static/hdalab/css/facettes.css
web/hdalab/static/hdalab/js/gomina.js
web/hdalab/views/ajax.py
--- a/web/hdalab/static/hdalab/css/facettes.css	Mon Mar 19 16:33:50 2012 +0100
+++ b/web/hdalab/static/hdalab/css/facettes.css	Fri Apr 20 10:51:34 2012 +0200
@@ -266,7 +266,7 @@
 
 
 #tagsearchwrap {
-    width: 50%;
+    width: 200px;
 }
 
 #tagsearch {
@@ -277,6 +277,18 @@
     color: #666; font-style: italic; font-weight: normal;
 }
 
+ul.ui-autocomplete {
+    width: 200px; font-family: "Open Sans";
+}
+
+.ui-autocomplete strong {
+    font-weight: bold;
+}
+
+#tagdata {
+    float: right; width: 465px;
+}
+
 #rightcol {
     float: left; width: 475px; margin-left: 5px;
 }
--- a/web/hdalab/static/hdalab/js/gomina.js	Mon Mar 19 16:33:50 2012 +0100
+++ b/web/hdalab/static/hdalab/js/gomina.js	Fri Apr 20 10:51:34 2012 +0200
@@ -103,7 +103,7 @@
 }
 
 
-function tagInfo(_taglabel) {
+function tagInfo(_taglabel, _filter) {
     var _urlParam = { "label": _taglabel };
     $.getJSON(gomNs.urls['tag_info'],
         _urlParam,
@@ -144,7 +144,9 @@
             } */
             $("#tagdata").html(_html);
         });
-    addFilter('tag', _taglabel);
+    if (typeof _filter !== "undefined" && _filter) {
+        addFilter('tag', _taglabel);
+    }
     $("#showlist").removeClass("actif");
 }
 
@@ -314,7 +316,7 @@
                     + _d.description.replace(/(^.{0,160})([\s]|$)(.*)/,'$1…')
                     + '</p><ul class="content-tags">'
                     + _d.tags.map(function(_t) {
-                        return '<li class="content-tag-item"><a href="#" onclick="tagInfo(this.getAttribute(\'original-label\')); return false;" original-label="'
+                        return '<li class="content-tag-item"><a href="#" onclick="tagInfo(this.getAttribute(\'original-label\'), true); return false;" original-label="'
                             + _t.label
                             + '"'
                             + (_t.match ? ' class="tagmatch"' : '')
@@ -446,7 +448,7 @@
             + _(data.tags).map(function(_d) {
                 return '<li style="font-size:'
                     + parseInt(10 + _scale * Math.sqrt(_d.score - _minTag))
-                    + 'px;"><a href="#" onclick="tagInfo(this.getAttribute(\'original-label\')); return false;" original-label="'
+                    + 'px;"><a href="#" onclick="tagInfo(this.getAttribute(\'original-label\'), true); return false;" original-label="'
                     + _d.label
                     +'"'
                     + (_d.match ? ' class="tagmatch"' : '')
@@ -495,7 +497,7 @@
             '<ul class="disc-ul">'
             + _disc.map(function(_d) {
                 var _col = getGradient(_d.score / _max);
-                return '<li class="disc-li" onclick="tagInfo(this.getAttribute(\'original-label\')); return false;" original-label="'
+                return '<li class="disc-li" onclick="tagInfo(this.getAttribute(\'original-label\'), true); return false;" original-label="'
                     + _d.label
                     + '"><div class="disc-label"><a href="#">'
                     + _d.translated_label
@@ -783,16 +785,45 @@
     $( "#tagsearch" ).autocomplete({
         source: gomNs.urls['tag_search'],
         minLength: 2,
+        focus: function( event, ui ) {
+            tagInfo(ui.item.value, false);
+            return false;
+        },
         select: function( event, ui ) {
-            tagInfo(ui.item.value);
+            tagInfo(ui.item.value, true);
             return false;
+        },
+        open: function() {
+            $('#tagdata').css({
+                width: "250px"
+            })
+        },
+        close: function() {
+            $('#tagdata').css({
+                width: "465px"
+            })
         }
-    }).addClass("grise")
+    })
+    .addClass("grise")
     .focusin(function() {
         if ($(this).val() == _defLab) {
             $(this).val("").removeClass("grise");
         }
-    });
+    })
+    .data("autocomplete")._renderItem = function(ul, item) {
+        return $( "<li></li>" )
+            .data( "item.autocomplete", item )
+            .append( '<a><span style="float: right;">'
+                + item.nb
+                + '</span>'
+                + item.label.replace(
+                    new RegExp('('
+                        + $("#tagsearch").val().replace(/(\W)/g, '\\$1')
+                        + ')','gi') ,
+                    '<strong>$1</strong>')
+                + "</a>" )
+            .appendTo( ul );
+    };
     $("#sessionname").click(function() {
         if (gomNs.write_allowed && !$(this).children().length) {
             var _el = document.createElement('input');
--- a/web/hdalab/views/ajax.py	Mon Mar 19 16:33:50 2012 +0100
+++ b/web/hdalab/views/ajax.py	Fri Apr 20 10:51:34 2012 +0200
@@ -129,7 +129,7 @@
     q = request.GET.get('term',None)
     if q:
         lq = q.lower()
-    qs = Tag.objects.filter( Q(label__icontains = q ) | Q(dbpedia_fields__translations__label__icontains = q, dbpedia_fields__translations__language_code=request.LANGUAGE_CODE), ~Q(dbpedia_uri = None)) if q else Tag.objects.filter(~Q(dbpedia_uri = None))       
+    qs = Tag.objects.filter(datasheet__validated=True).filter( Q(label__icontains = q ) | Q(dbpedia_fields__translations__label__icontains = q, dbpedia_fields__translations__language_code=request.LANGUAGE_CODE), ~Q(dbpedia_uri = None)) if q else Tag.objects.filter(~Q(dbpedia_uri = None))       
     qs = qs.annotate(nb=Count('datasheet')).order_by('-nb')[:20]
     
     qslist = list(qs)