Create Styled Search Box Similiar to AGOL

Anonymous User

Original User: mcdade31

I'm trying to create a search box that is a little more styled and similar to the box on ArcGIS Online Webmaps:

[ATTACH=CONFIG]26138[/ATTACH]

Currently my search box is a bit more "dated" and the button is outside of the actual textbox, which is one of the things I'm trying to fix:
[ATTACH=CONFIG]26139[/ATTACH]

Right now my search HTML code is:

<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>

and my CSS is:

#search {
    position:relative;
    top:2px !important;
    right: 95px;
    color:white !important;
    font-family:Goudy Old Style Italics;
    font-weight:bold;
    font-size:11pt;
   }

I know this isn't exactly a JavaScript API question but I'm having trouble implementing this. Any help would be appreciated.

searchbar.png

search.PNG

Intersecting.png

RFJS_2030_RCP85_PredictedStdDev.jpg

bbollin_0-1744318391385.png

brianlin_0-1620686125048.png

Anonymous User

Original User: odoe

Using dojo/keys, it could look something like this (don't hold me to it)

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

You could tie to a FindTask too if you like.