[4.3]-How to modify the placeholder for Search widget?

LeoDeng · ‎06-02-2017

I'm trying to modify the placeholder for search widget. But the attribute allPlaceholder seems invalid.

What's wrong with my scripts?

Version of ArcGIS API for JavaScript : 4.3

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no'>
<title>Create a map</title>
<style>
html, body, #viewDiv{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/widgets/Search',
'dojo/domReady!'], function(Map, MapView, Search){
var map = new Map({
basemap: 'streets'
});

var view = new MapView({
container: 'viewDiv',
map: map,
zoom: 10,
center: [-73.939501, 42.818609]
});

var searchWidget = new Search({
id: 'searchWidget',
view: view,
allPlaceholder: 'Search Location', // invalid
popupEnabled: false
});

view.ui.add(searchWidget, {
position: 'top-right', // top-left | top-right | bottom-left | bottom-right | manual (default)
index: 2
});
});
</script>
</head>
<body>
<div id='viewDiv'></div>
</body>
</html>

HemingZhu · ‎06-02-2017

since your search widget id is "searchWidget", your search input box id should be searchWidget_input. you could set this input box's placeholder property after the view is load like the following:

view.then(function () {
document.getElementById("searchWidget_input").placeholder = "Search Location";
});

btw, allPlaceholder is used when you have mulitple address locator.

View solution in original post

HemingZhu · ‎06-02-2017

since your search widget id is "searchWidget", your search input box id should be searchWidget_input. you could set this input box's placeholder property after the view is load like the following:

view.then(function () {
document.getElementById("searchWidget_input").placeholder = "Search Location";
});

btw, allPlaceholder is used when you have mulitple address locator.

hoogw · ‎01-23-2025

2025, v4.31. this solution no longer works.

The error I had is can't find this element.