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 possible to make the dropdown appear below the cursor of each which has a width equivalent to the dropdown words and not the entire length of the input box?

EDIT: Example (Google-like search box):

When you go to google and enter a long sentence as the sentence goes on, after each word, an autocomplete dropdown appears for each single word below the cursor position. So I require a similar dropdown which can be added on to the jQuery Autocomplete

My function is this big because it has features of multiple words and displaying array in order of alphabets.
Here is the <script code:

    <script>

    $(function() {

            var availableTags = <?php echo json_encode($sometags); ?>;


            function split( val ) {
            return val.split( / \s*/ );
            }
            function extractLast( term ) {
            return split( term ).pop();
            }
             $( "#query" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
            }
            })
            .autocomplete({
            minLength: 1,
            source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
            var term = $.ui.autocomplete.escapeRegex(request.term)
            , startsWithMatcher = new RegExp("^" + term, "i")
            , startsWith = $.grep(availableTags, function(value) {
                return startsWithMatcher.test(value.label || value.value || value);
            })
            , containsMatcher = new RegExp(term, "i")
            , contains = $.grep(availableTags, function (value) {
                return $.inArray(value, startsWith) < 0 &&
                    containsMatcher.test(value.label || value.value || value);
            });

            response(startsWith.concat(contains));
            },
            focus: function() {
            // prevent value inserted on focus
            return false;
            },
            select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( " " );
            return false;
            }
            });

    });
    </script>

EDIT: Just like the google-box, the dropdown should contain within the width of the input box meaning for example, the dropdown box for the last word in the input box should resize not to the right but to the left. The right edge of the dropdown box should be in line with the right edge of the inputbox and the total width of the dropdown (in case of words as big or bigger than input box) should not exceed the width of the input box.

UPDATE:
Here is the final mod of the google-like autocomplete: Fiddle (Updated 16/2/2013)
Features:
1) Fixed multiple words sort alphabetically against suggestions (jQuery-ui autocomplete multiple values sort results alphabetically)
2) Retrieve suggestions from 2 arrays with first suggestion opening at full width of input box like in google and rest of suggestions at the width of the longest suggestion
3) Fixed bugs of dropdown opening before input of word after ‘space’ (multiple values).
4) Prevent dropdown from being kept open at the end while adding words in between.
5) 16/2/2013 Update: When the length of tags inputted from suggestion box exceeds the length of the input box and on input of the next tag, the input box displays tags from first or it moves back to the first tag position and not from where the cursor was last placed as seen here – http://jqueryui.com/autocomplete/#multiple. This has been fixed.

This is a similar fiddle with only ONE array used and suggestions always at width of the longest suggestion – FIDDLE

Thanks to Jeffery To who provided the main solution to the question, and to Vadim and Dom whose answers provided ideas that were useful in creating the above mod.

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