Bing Autosuggest Dropdown Responsive CSS

Question

我正在测试documentation here。唯一的区别是我的searchBox是响应式的，并且有100%的宽度。

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

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

​

​

我已经决定，我可以通过在searchBox更改时将as_container max-width设置为等于它的宽度来修复此问题。

#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的最小宽度。这只是个人喜好，如果您希望该行缩小为零，则可以删除该行。希望这对某些人有帮助！