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

Question

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

以上宝石的演示在这里：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％。输入框也在表单元素下，因此现在您应该能够为自动完成输入框和下拉列表设置相同的宽度。在erb处理之后的HTML中，这意味着改变：

<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是＆＃39; search-form＆＃39;。

在rails html.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%;
}

这会使自动填充下拉列表的宽度尝试匹配其父级（表单元素）

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