topic Create Styled Search Box Similiar to AGOL in ArcGIS JavaScript Maps SDK Questions

Create Styled Search Box Similiar to AGOL

Anonymous User — Sat, 11 Dec 2021 08:48:28 GMT

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.

Re: Create Styled Search Box Similiar to AGOL

Anonymous User — Sat, 11 Dec 2021 08:48:31 GMT

Original User: odoe

You can use a regular input

<input type="text" class="search-input" placeholder="Search for a State..." title="Search for a State..." />

And then in your css, set a background image.

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

The result looks like this.
http://www.odoe.net/apps/angular-esri/

Then what you would want to do is either perform the search on each key input or just on enter.
There is a dojo/keys module that could simplify that for you.
http://dojotoolkit.org/reference-guide/1.9/dojo/keys.html

Re: Create Styled Search Box Similiar to AGOL

CraigMcDade — Tue, 23 Jul 2013 13:02:16 GMT

Thanks! Amateur question, but how would I tie that to the mapservice I want to query?

Re: Create Styled Search Box Similiar to AGOL

Anonymous User — Sat, 11 Dec 2021 08:48:35 GMT

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.