feature(Widgets): placeholder for searchbar can be modified

iTowns · Mar 16, 2022 · 9bd81ce · 9bd81ce
1 parent c209fdc
commit 9bd81ce
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/examples/widgets_searchbar.html b/examples/widgets_searchbar.html
@@ -108,6 +108,7 @@
             const searchbar = new itowns_widgets.Searchbar(view, geocodingOptions, {
                 // We want to display at maximum 15 location suggestions when typing the searchbar.
                 maxSuggestionNumber: 15,
+                placeholder: 'Search a location in France',
             });
 
 

diff --git a/utils/gui/Searchbar.js b/utils/gui/Searchbar.js
@@ -8,6 +8,7 @@ const DEFAULT_OPTIONS = {
     position: 'top',
     maxSuggestionNumber: 10,
     fontSize: 16,
+    placeholder: 'Search location',
 };
 
 
@@ -93,6 +94,8 @@ class Searchbar extends Widget {
      * @param   {number}        [options.fontSize=16]                   The font size in pixel of the searchbar content.
      * @param   {number}        [options.maxSuggestionNumber=10]        The maximum number of suggestions that should
                                                                         * appear under the searchbar.
+     * @param   {string}        [options.placeholder='Search location'] The placeholder that appears in the searchbar
+                                                                        * when nothing has yet been typed.
      */
     constructor(view, geocodingOptions, options = {}) {
         // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
@@ -127,7 +130,7 @@ class Searchbar extends Widget {
         const input = document.createElement('input');
         input.setAttribute('type', 'text');
         input.setAttribute('name', 'mySearch');
-        input.setAttribute('placeholder', 'Search location');
+        input.setAttribute('placeholder', options.placeholder || DEFAULT_OPTIONS.placeholder);
         input.style.height = `${options.height || options.size || DEFAULT_OPTIONS.height}px`;
         input.style.fontSize = `${options.fontSize || DEFAULT_OPTIONS.fontSize}px`;
         form.appendChild(input);