I am utilizing a Geocoder widget for my company project and it is being used in our website as an iframe. I want to trigger find() to invoke search_input
The Geocoder search input in teh below html gets populated when I enter an address in the parent html and the Requirement is when I click submit from parent window, or focus outfrom the field in parent window I want to fire search in the autopopulated Geocoder search input.
The Geocoder input doesn't search even if I programmatically click no the search icon using
1. $("div.esriGeocoderSearch.esriGeocoderIcon").click(); doesnt work
2. Nor a programamitc Keydown event on search input ofteh Geocoder works
Is there a away to call the geocoders find() from another method to trigger the search like using something as geocoder.find();
Here is the mapless.js which is being utilized in the html
require([
"esri/map",
"dojo/dom",
"dojo/on",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/dijit/Geocoder",
"dijit/form/RadioButton",
"dojo/parser", "dijit/registry",
"dojo/domReady!"
], function (Map, dom, on, Query, QueryTask, Geocoder, RadioButton, parser, registry ) {
parser.parse();
var queryTask = new QueryTask("http://services2.arcgis.com/mJaJSax0KPHoCNB6/ArcGIS/rest/services/DACTracts30/FeatureServer/0");
geocoder = new Geocoder({
//map: map,
autoComplete: true,
arcgisGeocoder: {
placeholder: "Please Enter an Address",
sourceCountry: "USA",
postfix:"CA"
}
}, dojo.byId("search"));
//geocoder.on("select", showResults);
geocoder.on('find-results', showResults);
geocoder.startup();
function showResults (evt) {
/
console.log(evt);
if(evt.results.results.length > 0){
console.log(geocoder.results);
//var point = evt.result.feature.geometry, DAC;
var point = evt.results.results[0].feature.geometry;
var lat = point.getLatitude(), lon=lon=point.getLongitude();
var query = new Query();
query.returnGeometry = false;
query.outFields = ["CENSUS_TRA","COUNTY","CITY","CES_3_0_Sc"];
query.geometry = point;
console.log(point);
queryTask.execute(query, function (featureSet) {
console.log(featureSet);
console.log(featureSet.features.length)
if (featureSet.features.length==0){
DAC= 'Location is not within a Disadvantaged Community';
} else { DAC='Location is within a Disadvantaged Community'};
console.log(DAC);
resultItems = [];
var resultCount = featureSet.features.length;
for (var i = 0; i < resultCount; i++) {
var featureAttributes = featureSet.features.attributes;
for (var attr in featureAttributes) {
resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
resultItems.push("<br>");
}
dojo.byId("geocodeResults").innerHTML = DAC;//resultItems.join("");
});
} else {
dojo.byId("geocodeResults").innerHTML = "Address not found";
}
//geocoder.clear();
//geocoder.destroy();
}
});
And the HTML is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Mapless DAC locator</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
<style>
html, body {
font:normal 12px verdana;
}
.results {
background-color:#eee;
width:300px;
height:35px;
text-indent: 10px;
}
.dijitCheckBoxInput {
opacity: 100;
}
.dijitCheckBox, .dijitRadio, .dijitCheckBoxInput {
width: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://js.arcgis.com/3.19/"></script>
<script src="http://localhost:3000/js/trigger.js"></script>
<script src="http://localhost:3000/js/mapless.js"> </script>
</head>
<body>
<b>Please enter the property address:</b><br>
<div id="search" style=""></div>
<br>
<span id="info"></span>
<br>
<div id="geocodeResults" class="results" style="text-indent:10px;"></div>
<div id="bldgResults" class="results"></div>
</body>
</html>
