topic Re: Change Search Widget Multi Source Placeholder Text in ArcGIS JavaScript Maps SDK Questions

Change Search Widget Multi Source Placeholder Text

IsaiahAguilera — Mon, 13 Apr 2015 23:29:28 GMT

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

Re: Change Search Widget Multi Source Placeholder Text

KellyHutchins — Tue, 14 Apr 2015 16:50:30 GMT

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

Re: Change Search Widget Multi Source Placeholder Text

IsaiahAguilera — Tue, 14 Apr 2015 17:38:58 GMT

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.

Re: Change Search Widget Multi Source Placeholder Text

KellyHutchins — Tue, 14 Apr 2015 17:55:40 GMT

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"

Re: Change Search Widget Multi Source Placeholder Text

IsaiahAguilera — Tue, 14 Apr 2015 20:23:04 GMT

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

Re: Change Search Widget Multi Source Placeholder Text

CemAkkus2 — Fri, 30 Oct 2015 04:00:27 GMT

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();

Re: Change Search Widget Multi Source Placeholder Text

MeghnaNatraj — Mon, 30 Nov 2015 22:20:42 GMT

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.