javascript – 如何创建可调整大小的div作为搜索引擎

2023年3月5日 180次阅读

我正在开发搜索引擎到我的应用程序,作为其中的一部分,用户可以搜索多个短语这里是一些例子 –

《javascript – 如何创建可调整大小的div作为搜索引擎》

当输入行充满时：
《javascript – 如何创建可调整大小的div作为搜索引擎》

它的高度应该调整,文本光标应该到达下一行.

问题是,它看起来像在第三行,我的算法不再有效,它看起来像那样：
《javascript – 如何创建可调整大小的div作为搜索引擎》

我的搜索输入的结构就是这样

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高度.
有人有一些想法或算法可以在那种情况下工作吗？

最佳答案 首先,你的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
}
点赞