Jquery-ui autocomplete dropdown below each word

Question

I\'m using Autocomplete from jquery-ui. In the multiple values, you can get dropdown list for each word after space, but the dropdown appears at the size of the input box. Is it

Answer 1

As the other answers have suggested, we measure the width of the text in the input field (using a hidden element), then offset the autocomplete box. We can also reset the width of the autocomplete box so that it's only as wide as the longest suggestion (demo):

open: function( event, ui ) {
    var input = $( event.target ),
        widget = input.autocomplete( "widget" ),
        style = $.extend( input.css( [
            "font",
            "border-left",
            "padding-left"
        ] ), {
            position: "absolute",
            visibility: "hidden",
            "padding-right": 0,
            "border-right": 0,
            "white-space": "pre"
        } ),
        div = $( "<div/>" ),
        pos = {
            my: "left top",
            collision: "none"
        },
        offset = -7; // magic number to align the first letter
                     // in the text field with the first letter
                     // of suggestions
                     // depends on how you style the autocomplete box

    widget.css( "width", "" );

    div
        .text( input.val().replace( /\S*$/, "" ) )
        .css( style )
        .insertAfter( input );
    offset = Math.min(
        Math.max( offset + div.width(), 0 ),
        input.width() - widget.width()
    );
    div.remove();

    pos.at = "left+" + offset + " bottom";
    input.autocomplete( "option", "position", pos );

    widget.position( $.extend( { of: input }, pos ) );
}

Update: Fixed autocomplete box positioning

Update 2: Another autocomplete box positioning fix

Answer 2

Using JQuery's multiple demo, what you could do is create a hidden span element

<span id="characterSpan" style="visibility: hidden;"></span>

and use it to store the input's val().

From there, use .width() to get the span's width and use the autocomplete's open( event, ui ) event :

open: function( event, ui ) {
        var span = $('#characterSpan');
        var width = span.width();
        width > $('#query').width() ? 
        width = parseInt($('#query').position().left + $('#query').width()) : 
        width = parseInt($('#query').position().left + width);

        $('.ui-autocomplete.ui-menu').css('left', width + 'px');
    }

DEMO: http://jsfiddle.net/dirtyd77/5ySF9/8/

Hope I explained this well enough and let me know if you have any questions!

Answer 3

I've based the answer on the answer to this question. As mentioned in that answer, IE<9 will need some extra code to make this work.

Basically you create a span into which you write out the contents of the input element. You then use the width of this span to calculate the offset. JqueryUI provides a position hook where you can actually offset the value. so the HTML

<input id="query" style="width: 300px" />
<span id="faux" style="display:none" />

And the JS

    var query= $("#query");
    var faux = $("#faux");
    query.autocomplete({
        source: mySource
    }).on("keydown", function() {
        var off = query.selectionStart;
        faux.text(query.val().substring(0, off).replace(/\s/g, "\u00a0"));
        query.autocomplete("option", "position", 
              {my: "left top", at: "left+" + faux.outerWidth() + " bottom"});
    });

Working JSFiddle