Change Search Widget Multi Source Placeholder Text

6639
6
Jump to solution
04-13-2015 04:29 PM
IsaiahAguilera
Occasional Contributor II

How do you change the placeholder text for the new Search Widget.  I understand how to do it per source but when searching multiple sources at once I can't seem to find a property to set the placeholder text that would replace the "Search address or place" text. Any help would be appreciated.

This is the search widget I am referring to.

https://developers.arcgis.com/javascript/jsapi/search-amd.html

Edit: In the meantime I can use this to set it but I think there should be a property for this somewhere.

document.getElementById('search_input').placeholder

Thanks,

Isaiah

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

All the default api strings are contained in an object that is translated into all the languages the API supports. More info about this can be found here:

Default API Strings | Guide | ArcGIS API for JavaScript

So to modify the default strings you'll load the strings object and make the necessary modifications.  Here's an example showing how I'd update the placeholder text for the search widget assuming I've loaded esriBundle using the steps outlined in the help topic I liked above.

     esriBundle.widgets.Search.main.placeholder = "My Placeholder"

View solution in original post

6 Replies
KellyHutchins
Esri Frequent Contributor

You'll want to set the placeholder on the source instead of the search widget itself.  Check out the example on the sources object in the help.

Search | API Reference | ArcGIS API for JavaScript

This sample also shows how to set placeholders for each source:

Search multiple sources | ArcGIS API for JavaScript

0 Kudos
IsaiahAguilera
Occasional Contributor II

Okay I understand that part but when I switch the search widget to search all sources at once the placeholder switches to "Search address or place". That is what I wanted to change.  I did it easy enough by selecting the dom element by id but I just wanted to see if there was an out of the box way to change the placeholder when the widget is searching all sources at once.

0 Kudos
KellyHutchins
Esri Frequent Contributor

All the default api strings are contained in an object that is translated into all the languages the API supports. More info about this can be found here:

Default API Strings | Guide | ArcGIS API for JavaScript

So to modify the default strings you'll load the strings object and make the necessary modifications.  Here's an example showing how I'd update the placeholder text for the search widget assuming I've loaded esriBundle using the steps outlined in the help topic I liked above.

     esriBundle.widgets.Search.main.placeholder = "My Placeholder"

IsaiahAguilera
Occasional Contributor II

Got it! Thank you! That makes sense.  I appreciate the response!

0 Kudos
CemAkkus2
New Contributor II

I tried esriBundle.widgets.Search.main.placeholder = "My Placeholder" but somehow it did not do the trick.

I looked into the widget and found another property for main placeholder which is called "allPlaceholder" so esriBundle.widgets.Search.main.allPlaceholder = "My Placeholder"  did the work. I also tried updating "allPlaceholder" in the search class properties and it worked as well.

         var mySearch = new Search({

            allPlaceholder: "My Placeholder"

         }, "search");

          sources.push({

             placeholder: "Sub-Placeholder 1"

          });

         sources.push({

             placeholder: "Sub-Placeholder 2"

         });

         mySearch("sources", sources);

         mySeacrh.startup();

MeghnaNatraj
New Contributor

Hey Isaiah, Not sure if you already found the solution, but I fixed this in my code using this,

search.on("load", function () {

//push all the sources

  var sources = search.sources;

  sources.push(addSources("ABC","ABC","eg : ABC",1));

  sources.push(addSources("XYZ","XYZ","eg: XYZ",1));

  search.set("sources", sources);

  //Adding the placeholder here, as the search bar is loaded with sources only at this point of the execution

  //Hence, we can modify the CSS only after this point.

  $("#search_input").attr('placeholder','Search Tree Data');

  });

You cannot modify the CSS anywhere in the code. It has to be modified only when the search bar has been loaded with all its sources. I tried adding a $document.ready(function(){}); or adding the css at the end of the body. Nothing worked because we are using a different javascript library/toolkit here - Dojo. Hence, we can only performs operations based on how the data is loaded or when call backs are called in Dojo. and not in normal HTML javascript to jQuery.

0 Kudos