"scroll" to the end of the input after js modifies input's value

Question

I have a <input id="inp" type="text"> that user writes in, and sometimes uses suggests from a dictionary. When a suggest is selected I do:

var input = $('#inp'); 
input.val(input.val()+suggestedText+' '); 
input.focus(); // that is because the suggest can be selected with mouse

everything works great, but when after adding a suggest that makes the resulting input.val() too long to fit in the edit field, the cursor is at the end of the string (which is good), but only the beginning of the string is visible in the edit field, so the cursor is hidden as well.

As soon as a key is pressed (a key that changes the value) the "scroll" goes to the end of the string hiding the beginning... How to trigger this behavior automatically, without having to press a key?

I have found a solution here - but it is not good as the whole input experience is changed...

Answer 1

Have you tried:

var input = $('#inp'); 
input.val(input.val()+suggestedText+' '); 
input.focus(); // that is because the suggest can be selected with mouse

var height=input.contents()[0].outerHeight()
input.animate({
    scrollTop:height
},'normal');

?