使一个元素的宽度与另一个元素相同

Question

我在这里使用 rails-jquery-自动完成 gem：https://github.com/bigtunacan/rails-jquery-autocomplete

上面gem的演示在这里：https://rocky-thicket-9286.herokuapp.com/

在我的应用程序中，我需要使自动完成下拉列表的宽度与我的输入字段的宽度相同，这是一个响应式组件并且宽度会变化。

我怎样才能做到这一点？

例如，您能否告诉我如何修改 https://rocky-thicket-9286.herokuapp.com/ 中的示例，使其自动完成下拉列表宽度与其输入字段的宽度相同？

是否可以在纯 CSS 或 JavaScript 中执行此操作？

我当前的代码：

<script type="text/javascript">
  var width = document.getElementById('search').offsetWidth;
  // won't work, document.getElementById('ui-id-1') gives null, but it shouldn't because I wait til window loaded as you can see below
  window.onload = document.getElementById('ui-id-1').style.width = width;
</script>

更新 1

如下图所示，搜索字段的宽度和自动完成下拉列表的宽度不同：

Answer 1

回答我自己的问题：

事实证明，Gem's GitHub doc README page 中记录了解决方案的一个关键要素。前几次我阅读文档时忽略了此信息，因为我误解了（将其视为输入框，而不是下拉列表，但实际上他们在谈论下拉列表）。

使用 the gems's doc page 中的演示示例，了解上述信息后，您可以将自动完成下拉列表放在表单元素内，并将自动完成的宽度设置为 100%。输入框也在表单元素下，所以现在您应该能够为自动完成输入框和下拉列表设置相同的宽度。在HTML erb处理后，这意味着从这个改变：

<input type="search" name="search" id="search" class="search-query" placeholder="namesearch" data-autocomplete="/foods/autocomplete_food_name">

对此：

<input type="search" name="search" id="search" class="search-query" placeholder="namesearch" data-autocomplete="/foods/autocomplete_food_name" data-append-to='search-form'>

因为表单元素的元素 ID 是 'search-form'。

在railshtml.erb中，这意味着从：

<%= f.autocomplete_field :name, autocomplete_food_name_foods_path %>

至：

<%= f.autocomplete_field :name, autocomplete_food_name_foods_path, append_to: '#search-form' %>

自动完成下拉列表的 css 是：

.ui-autocomplete {
  max-width: 100%;
}

这将使自动完成下拉列表的宽度尝试匹配其父级（即表单元素）

作为自动完成输入字段的另一个元素应该已经与父元素匹配，所以现在两个自动完成元素应该具有相同的宽度。

使一个元素的宽度与另一个元素相同

Make an element's width the same as another element

javascript

css

jquery-ui-autocomplete