GeoCode Widget

[JohnBrady]

Anyone know how would I go about utilizing ESRI's geocode capabilities in a pre-built seaerch box?...the code below is our function with the GeoCode widget added.  However, the behavior isn't quite correct.  I'd like to configure our search box & button to hit the ESRI geocoder

function searchAddress(address) {
    function init() {
        geocoder = new esri.dijit.Geocoder({
            map: map,
            autoComplete: true,
            arcgisGeocoder: {
                name: "Esri World Geocoder",
                suffix: " Staunton, VA"
            }
        }, "AddressSearchButton");
        geocoder.startup();
    }
    dojo.ready(init);
}

[TrevorHavelka]

John,

The way the code is setup, you should be auto completing in a div with an id="AddressSearchButton" that is auto completing for addresses in Staunton, VA.  What is your expected output?

[JohnBrady]

"The way the code is setup, you should be auto completing in a div with an id="AddressSearchButton" that is auto completing for addresses in Staunton, VA.  What is your expected output?"

Afternoon Trevor, thanks for repsonding...

The behavior I am seeing is when executing the search in the text box, the code then initiates a "sub-Text box (see attachment)

here is the <div> statement

<div id="SearchDialog" data-rel="dialog" title="<i class='icon-search icon-large'></i>  Map Search" class="after-load">
    <form id="SearchForm" onsubmit="mapSearch($('#AddressSearchText').val());return false;">
        <input id="AddressSearchText" type="text" class="search-query" placeholder="Search for: Street Addresses" />
        <button id="AddressSearchButton" class="btn btn-primary"><i class="icon-search"></i></button>
    </form></div>

[TrevorHavelka]

I don't believe you need the button.  Change your JS to point to the id="AddressSearchText" textbox and the geocoder should render properly. 

function searchAddress(address) {
function init() {
geocoder = new esri.dijit.Geocoder({
map: map,
autoComplete: true,
arcgisGeocoder: {
name: "Esri World Geocoder",
suffix: " Staunton, VA"
}
}, "AddressSearchText");
geocoder.startup();
}
dojo.ready(init);
}

[JohnBrady]

I had tried that already and it didn't work

I am going to try downloading the dijit css and change the reference there