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

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

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!