How to create a resizeable div as a search engine

Question

I am creating a search engine for my application, and as part of it, the user can search for several phrases, here is some example -

When the input line is filled like this:

The height should be adjusted, and the text cursor should move to the next line.

The problem is that it looks like in the third line my algorithm doesn’t work anymore and it looks like this:

The structure of my search input is similar to

Html:

<div id=s"earchDiv">
    <input id="searchInput">
    </input>
</div>

JS:

    var sDiv = document.getElementById('searchDiv');
    var sInput = document.getElementById('searchInput');
    var currH = $(sDiv).height();
    $(sDiv).css('height', sDiv.scrollHeight + 'px');
    var h = 40 - ($(sDiv).height() % 40);
    if ($(sDiv).height() % 40 != 0)
        $(sDiv).css('height', ($(sDiv).height() + h) + 'px');

which means that acuttaly div height will be adjusted. Does anyone have an idea or algorithm that can work in this situation?

Answer 1

, html:

<div id=s"earchDiv">
    <input id="searchInput">
    </input>
</div>

:

<div id="searchDiv">
    <input id="searchInput">
    </input>
</div>

... , JS , CSS searchDiv, :

.searchDiv {
    display: block;
    width: 100%;
    height: auto; // this is important
    min-height: 40px; // change this as you wish
}

Answer 2

CSS.

#searchDiv{
     overflow:hidden; /* the parents of searchdiv should not have fixed height. */
}