diff --git a/lib/templates/form_autocomplete_input.mustache b/lib/templates/form_autocomplete_input.mustache
index ad064f29eeb..7bf50328ced 100644
--- a/lib/templates/form_autocomplete_input.mustache
+++ b/lib/templates/form_autocomplete_input.mustache
@@ -41,3 +41,13 @@
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
 {{/showSuggestions}}
+
+{{#js}}
+require(['jquery'], function($) {
+    // Set the minimum width of the input so that the placeholder is whole displayed.
+    var inputElement = $(document.getElementById('{{inputId}}'));
+    if (inputElement.length) {
+        inputElement.css('min-width', inputElement.attr('placeholder').length + 'ch');
+    }
+});
+{{/js}}
diff --git a/theme/boost/templates/core/form_autocomplete_input.mustache b/theme/boost/templates/core/form_autocomplete_input.mustache
index f8d92938a58..0d2b9664c94 100644
--- a/theme/boost/templates/core/form_autocomplete_input.mustache
+++ b/theme/boost/templates/core/form_autocomplete_input.mustache
@@ -41,3 +41,13 @@
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
 {{/showSuggestions}}
+
+{{#js}}
+require(['jquery'], function($) {
+    // Set the minimum width of the input so that the placeholder is whole displayed.
+    var inputElement = $(document.getElementById('{{inputId}}'));
+    if (inputElement.length) {
+        inputElement.css('min-width', inputElement.attr('placeholder').length + 'ch');
+    }
+});
+{{/js}}