크기 조정 가능한 div를 검색 엔진으로 만드는 방법

내 앱에 검색 엔진을 개발 중이며 그 일부로 사용자가 여기에서 여러 구문을 검색 할 수있는 몇 가지 예가 있습니다.

입력 라인이 다음과 같이 가득 차면 :

높이를 조정하고 텍스트 커서가 다음 줄로 이동해야합니다.

문제는 세 번째 줄에서 내 alogrithm이 더 이상 작동하지 않고 다음과 같이 보입니다.

내 검색 입력의 구조는 다음과 같습니다.

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');

즉, div 높이가 조정되어야 함을 의미합니다. 누군가 그 상황에서 작동 할 수있는 아이디어 나 알고리즘이 있습니까?