How to position jquery autocomplete next to a word if the sentence goes to the next line?

Question

I am using jquery ui autocomplete to implement suggestions as you type. I changed the autocomplete positioning to make at appear next to a word instead of appearing on top of the entire sentence like it happens by default. This is how it currently looks like

But once the text becomes multi line, the autocomplete positioning goes for a toss.

As you can see the last word sc gets an autocomplete suggestion but the suggestion shows up at the end on the first line instead of showing right next to the last word like it does as long as its on the first line.

This is the code that that applies the autocomplete positioning

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 bottom",
            collision: "flip"
        },
        offset = 10;


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


    div
        .text( input.text().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 + " top";
    input.autocomplete( "option", "position", pos );

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


    }

This code was originally suggested as an answer in this post on which I did some minor modifications Jquery-ui autocomplete dropdown below each word

I am applying this on a content editable div which has the property div {min-height: 18px; overflow: auto;} to get the multi line scroll.

How can I change this to make the autocomplete suggestions appear at the end of the word in multi lines too?

Answer 1

First of all parent element has to be display: inline; position: relative; then child element can be properly positioned with absolute position at the end of the line. right: 0px; bottom: 0px; positioon: absolute;