Render autocomplete box the django way

autocomplete_light/static/autocomplete_light/autocomplete.js

@@ -55,6 +55,44 @@ Also, note that this script is composed of two main parts:
 `$.fn.yourlabsAutocomplete`
 */
 
+if (window.findPosX === undefined) {
+    window.findPosX = function(obj) {
+        var curleft = 0;
+        if (obj.offsetParent) {
+            while (obj.offsetParent) {
+                curleft += obj.offsetLeft - ((isOpera) ? 0 : obj.scrollLeft);
+                obj = obj.offsetParent;
+            }
+            // IE offsetParent does not include the top-level
+            if (isIE && obj.parentElement){
+                curleft += obj.offsetLeft - obj.scrollLeft;
+            }
+        } else if (obj.x) {
+            curleft += obj.x;
+        }
+        return curleft;
+    }
+}
+
+if (window.findPosY === undefined) {
+    window.findPosY = function(obj) {
+        var curtop = 0;
+        if (obj.offsetParent) {
+            while (obj.offsetParent) {
+                curtop += obj.offsetTop - ((isOpera) ? 0 : obj.scrollTop);
+                obj = obj.offsetParent;
+            }
+            // IE offsetParent does not include the top-level
+            if (isIE && obj.parentElement){
+                curtop += obj.offsetTop - obj.scrollTop;
+            }
+        } else if (obj.y) {
+            curtop += obj.y;
+        }
+        return curtop;
+    }
+}
+
 // Our class will live in the yourlabs global namespace.
 if (window.yourlabs === undefined) window.yourlabs = {};
 
@@ -237,6 +275,12 @@ yourlabs.Autocomplete = function (input) {
 
     // The autocomplete box HTML.
     this.box = $('<span class="yourlabs-autocomplete"></span>');
+
+    /*
+    We'll append the box to the container and calculate an absolute position
+    every time the autocomplete is shown in the fixPosition method.
+    */
+    this.container = $('body');
 };
 
 /*
@@ -499,19 +543,22 @@ yourlabs.Autocomplete.prototype.move = function(e) {
         [target, this]);
 };
 
-// Calculate and set the outer container's absolute positionning.
-yourlabs.Autocomplete.prototype.fixPosition = function() {
-    // Insert the autocomplete container after the input.
-    var pos = $.extend({}, this.input.position(), {
-        height: this.input.outerHeight()
-    });
+/*
+Calculate and set the outer container's absolute positionning. We're copying
+the system from Django admin's JS widgets like the date calendar, which means:
 
-    this.input.parents().filter(function() {
-        return $(this).css('overflow') === 'hidden';
-    }).first().css('overflow', 'visible').addClass('autocomplete-light-clearfix');
+- the autocomplete box is an element appended to this.co,
+- 
+*/
+yourlabs.Autocomplete.prototype.fixPosition = function() {
+    var el = this.input.get(0)
 
-    this.box.insertAfter(this.input).css(
-            {top: pos.top + pos.height, left: pos.left});
+    this.box.appendTo(this.container).css({
+        position: 'absolute',
+        minWidth: parseInt(this.input.outerWidth()),
+        top: (findPosY(el) + this.input.outerHeight()) + 'px',
+        left: findPosX(el) + 'px'
+    });
 };
 
 // Proxy fetch(), with some sanity checks.

autocomplete_light/static/autocomplete_light/style.css

@@ -8,7 +8,6 @@
     left: 0;
     z-index: 1000;
     display: none;
-    float: left;
     min-width: 160px;
     padding: 5px 0;
     margin: 2px 0 0;
@@ -77,7 +76,6 @@
 .autocomplete-light-widget input:focus {
     margin: 0;
     outline: 0;
-    width: 230px;
 }
 
 .autocomplete-light-widget {
@@ -160,11 +158,6 @@ input.autocomplete.xhr-pending {
     clear: both;
 }
 
-/* grappelli specific */
-fieldset.grp-module .grp-row {
-    overflow: visible !important;
-}
-
 /* credit: http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/ */
 #yourlabs_overlay {
     position: absolute;

autocomplete_light/widgets.py

@@ -186,7 +186,7 @@ def build_attrs(self, extra_attrs=None, **kwargs):
         if 'class' not in attrs.keys():
             attrs['class'] = ''
 
-        attrs['class'] += ' autocomplete'
+        attrs['class'] += ' autocomplete vTextField'
 
         attrs.setdefault('data-autocomplete-choice-selector', '[data-value]')
         attrs.setdefault('data-autocomplete-url',

test_project/admin_autocomplete_in_row/admin.py

@@ -7,5 +7,5 @@
 
 class YourModelAdmin(admin.ModelAdmin):
     form = shortcuts.modelform_factory(YourModel, exclude=[])
-    fields = (('name', 'relation'),)
+    fields = (('name', 'relation'),('name2', 'date_and_time'))
 admin.site.register(YourModel, YourModelAdmin)

test_project/admin_autocomplete_in_row/models.py

@@ -6,6 +6,9 @@
 class YourModel(models.Model):
     name = models.CharField(max_length=100)
     relation = models.ForeignKey('self', null=True, blank=True)
+
+    name2 = models.CharField(max_length=100, null=True, blank=True)
+    date_and_time = models.DateTimeField(null=True, blank=True)
 
     def __str__(self):
         return self.name