nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change Search Widget Multi Source Placeholder Text

IsaiahAguilera

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

Find more posts tagged with

Accepted answers

khutchins

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"

All comments

MeghnaNatraj

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.

CemAkkus2

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

IsaiahAguilera

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

khutchins

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

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

IsaiahAguilera

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.

khutchins

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.