Bing Autosuggest 下拉响应 CSS

Question

我正在测试 documentation here。唯一的区别是我的 searchBox 响应迅速并且宽度为 100%。

<div id='searchBoxContainer'>
   <input type='text' id='searchBox' style="width:100%"/>
</div>

在移动设备上 searchBoxContainer 不支持 searchBox 的宽度。下面的红色悬垂扩展了我的移动应用程序，感觉不太好。

我确定我可以通过将 as_container max-width 设置为等于 searchBox 的宽度来解决这个问题。

#as_container { 
max-width: width of search box;
}

有没有办法随着 searchBox 宽度的变化动态设置 #as_container max-width？我已经用 $(window).resize 和一点点 javascript 解决了这个问题，但我觉得有 CSS 来处理这个问题？

Answer 1

这是我想出的。这真的很简单，我更喜欢 CSS 解决方案。在我的例子中，searchBox 响应它的容器，style="width:100%"。在调整大小时，我将 bings 下拉容器的 max-width 匹配到 searchBox。容器的宽度可以设置为 #as_container.

        // Our responsive fix for the autosuggest is to limit it's max width to the dropdown container. (Assuming our searchBox is responsive, we'll match widths)
        function FixAutoSuggest() {
            try {
                var css = document.getElementById("autoSuggestFix");
                // Create a CSS element for our fix if it hasn't been created already.
                if (!css) {
                    css = document.createElement("style");
                    css.setAttribute("id", "autoSuggestFix");
                    css.type = "text/css";
                    document.body.appendChild(css);
                }
                // Set the appropriate width for our auto suggest container.
                var searchBox = document.getElementById('searchBox')
                if (searchBox != null) {
                    var bb = searchBox.getBoundingClientRect(), columnWidth = bb.right - bb.left;
                    // We set column width minimum to 150.
                    columnWidth = ((columnWidth > 150) ? columnWidth : 150);
                    css.innerHTML = "#as_container { max-width: " + columnWidth + "px }";
                }
            }
            catch (err) {
                alert('FixAutoSuggest' + err);
            }

        }

        $(window).resize(function () {
            FixAutoSuggest();
        });

在我的例子中，搜索框最初没有显示，我在显示它时调用 FixAutoSuggest()。如果你在加载时显示它，你也可以随时修复它。

 $(document).ready(function () {
        FixAutoSuggest();
    });

您会注意到，在 FixAutoSuggest() 中，我在 bing 下拉菜单中设置了 150px 的最小宽度。这只是个人喜好，如果你想让它缩小到什么都没有，你可以删除那条线。希望这对某人有帮助！

Bing Autosuggest 下拉响应 CSS

Bing Autosuggest Dropdown Responsive CSS

html

css

bing-maps