<div id="search"> <input type="text" id="parcel" size="30" value="Enter Parcel ID or Address"/> <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}'>Search</button> </div>
#search { position:relative; top:2px !important; right: 95px; color:white !important; font-family:Goudy Old Style Italics; font-weight:bold; font-size:11pt; }
<input type="text" class="search-input" placeholder="Search for a State..." title="Search for a State..." />
input.search-input { position: relative; z-index: 3; width: 350px; font-size: 1.2em; border: 2px solid #34495e; float: right; line-height: 25px; padding-left: 30px; /* Provide this offset so the text doesn't go over the image*/ color: gray; background-image: url("img/search-icon.png"); background-repeat: no-repeat; background-position-x: 0.5em; /* I have it offset from the left a bit */ background-position-y: 50%; }
require( [ "dojo/keys", "dojo/query", "dojo/on", "esri/tasks/QueryTask", "esri/tasks/query" ], function(keys, query, on, QueryTask, query){ on(query('.search-input'), "keypress", function(evt){ if (evt.charOrCode === keys.ENTER) { // whatever fun stuff you did on a button click before var q = new Query(); q.text = query('.search-input')[0].value; var qTask = new QueryTask('urltomapservice'); qTask.execute(q).then(function(fset) { // more fun stuff }); } }); });