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

回答我自己的问题:

事实证明,解决方案的一个关键要素记录在 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是“搜索表单”。

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

这将使“自动完成”下拉列表的宽度与其父级(即表单元素)的宽度相匹配

另一个元素是自动完成输入字段,它应该已经匹配父元素,因此现在两个自动完成元素的宽度应该相同。