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
Solved! Go to Solution.
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"
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:
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.
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"
Got it! Thank you! That makes sense. I appreciate the response!
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();
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.