Geocoder Placeholder not working in 3.5

TonyMonsour · ‎06-12-2013

I can't seem to get the placeholder text to work for the geocoder dijit. It isn't working in the sample http://developers.arcgis.com/en/javascript/samples/locator_suffix/ either. Any Ideas?

My code matches the example.

var geocoder = new esri.dijit.Geocoder({ 
  autoComplete: true,
        maxLocations: 10,
        map: map,
  arcgisGeocoder: {
            placeholder:"Search Location..."
          }
        }, "location-search1");
    geocoder.startup();

The element that gets built is this...
[HTML]<input id="location-search1_input" type="text" role="textbox" data-dojo-attach-event="ondijitclick:_inputClick" data-dojo-attach-point="inputNode" autocomplete="off" value="" placeholder="" tabindex="0" aria-haspopup="true">[/HTML]

Im currently using JS to set it after the fact but would prefer to just use the dijit's capabilities.

$("#location-search1_input").attr("placeholder","Location Search..")

Thanks,
Tony

KellyHutchins · ‎06-12-2013

Hi Tony,

Looks like this is a bug in the Geocoder at version 3.5. We'll get this fixed for the next release.

Kelly

AveryGomez · ‎08-22-2013

Hello,

Has anyone had any luck getting the Geocoder Placeholder to work with 3.5? I understand there may be a bug, but I have been working on my web application with all 3.5 samples and don't want to start all over with these new samples. I'm still fairly new to this and am hoping someone might have been able to get through. Any help would be greatly appreciated.

I am trying to add the placeholder and a symbol in displaying an info window for the found location, but nothing is coming up when using the following source:

http://help.arcgis.com/en/webapi/javascript/arcgis%20/jstutorials/tutorial_geocoder.html

Thanks,
Avery

JohnGravois · ‎08-22-2013

@avery

please check out this thread where i explained to another user how to set the placeholder after the widget startup based on the div's dojo id.

AveryGomez · ‎08-26-2013

Hi John,

Thanks for the link to the thread discussing how to set the placeholder.

please check out this thread where i explained to another user how to set the placeholder after the widget startup based on the div's dojo id.

I however am still having trouble getting it to work. Were you able to get the placeholder set up using 3.5?

This is what I used following your thread.

dojo.require("esri.dijit.Geocoder");

var geocoder;

//add geocoder
            var geocoder = new esri.dijit.Geocoder({
            map: map,
            geocoder: geocoder,
            placeholder: "Address Search",
            //value: "Address Search", //***this kinda works
            theme: "simpleGeocoder",
            arcgisGeocoder: geocodeOptions
            }, "webmap-toolbar-right");

            geocoder.startup();

   dojo.byId("webmap-toolbar-right_input").placeholder = "Address Search"

                                        //end geocoder

<div id="search"></div>

Am I missing something that you think may help in getting this to work?

Regards,
Avery

JohnGravois · ‎08-26-2013

you're using "webmap-toolbar-right" as the div name in your widget constructor and appropriately referring to "webmap-toolbar-right_input" afterward, but the actual div for the page in the code you included is "search"

if you refer to the appropriate div consistently throughout, you should see the behavior you want in 3.5 as well.

geocoder = new Geocoder({ 
    map: map,
    //this will start working whenever you migrate to 3.6
    arcgisGeocoder: {
        placeholder:"Search Location..."
    }
}, "search");

geocoder.startup();
dojo.byId("search_input").placeholder = "hi avery";
...
<body>
    <div id="search"></div>

i'm really fond of the inspector tool in Chrome developer tools. if you click on the magnifying glass and then the text input box, you can see its actual name and the CSS rules that are being applied.

AveryGomez · ‎08-27-2013

Hi John,

Thank you very much for your help. I was able to get the Geocoder to work, but I am still not able to see the "Search Location..." in the placeholder. Any suggestions?

I ended up using this code in order to get it to work:

//add geocoder
                var geocoder = new esri.dijit.Geocoder({
                    map: map,
                    //this will start working whenever you migrate to 3.6
                    autocomplete: true,
                    arcgisGeocoder: {
                        placeholder: "Search Location..."
                    }
                }, "search");

                geocoder.startup();
                dojo.byId("search").placeholder = "hi avery";
                //end geocoder

-Avery

JohnGravois · ‎08-27-2013

if you're not ready to migrate to 3.6, you need to change the following line.

dojo.byId("search_input").placeholder = "Search Location..";

heres a working fiddle
http://jsfiddle.net/jagravois/6EWV3/1/

AveryGomez · ‎08-27-2013

Works perfect!! Thanks John! 🙂

I was needing this one part:

require([
"esri/map", "esri/dijit/Geocoder", "dojo/domReady!"
], function(Map, Geocoder) {

along with:

dojo.byId("search_input").placeholder = "Search Location..";

Now I can see the "place holder."

Thank you again.
-Avery