nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Geocoder: Triggering the display of candidate addresses

DonaldWood

From elsewhere in my application, I want to be able put an address in the Geocoder and trigger the display of candidate addresses so that the user can pick one.

This code accomplishes the first goal -- getting a string into the Geocoder:
simplemap.geocoder.focus();
$geocoderInput = $dom.find("#simplemap_divGeocoder_input");
$geocoderInput.val("100 W Peachtree, Atlanta, GA");

But I have not been able to find a way to trigger the display of candidate addresses so that the user can pick one.
This statement doesn't work:
$geocoderInput.trigger("keyup");

Neither did the other triggers ("keydown", "keypress") or combinations thereof.

From looking at the Geocoder code on GitHub*, it seems like the "keyup" trigger, once we have more than a couple of characters of text in the input box, should work. But it doesn't.

The Geocoder only seems to respond to actual key presses on the keyboard. How does it know the difference between an actual keypress and the event which says this happened?

Thanks in advance for any help or insights.

*https://github.com/Esri/arcgis-dijit-geocoder-js

Find more posts tagged with

Accepted answers

All comments

JohnGravois

donald,

welcome to our forums 🙂

you won't have a reference to any candidates until after you call geocoder.find() and wait for a callback with the results from the geocoding service itself...

geocoder.find();
geocoder.on("find-results", function(evt) {
  console.log(evt.results);
});

DonaldWood

Thanks for the Welcome and the quick response, John.

Your suggestion would work fine if I was trying to have my program process the candidates and display them in some UI that it had built. But I'm trying to let the user see the candidates, right below the geocoder widget.

To put it another way, I want the geocoder to behave as if the user had typed in the address, and the AutoComplete function had fired, displaying a list of candidates.

Looking at the code on GitHub, I want to somehow trigger the _inputKeyUp function [line 1084], which will notice that I've set the AutoComplete option and that enough characters have been typed in [line 1117] and invoke this._autoComplete() [line 1118], which runs the query [line 732] and does the this._showResults [line 739].

I just can't figure out how to trigger the _inputKeyUp. It seems to be listening for it:
on(this.inputNode, "keyup" [line 1049].
But my doing $geocoderInput.trigger("keyup"); doesn't seem to be getting through.

Doing an "Inspect Element" from Chrome, I see that this is the correct DOM element:

input aria-haspopup="true" id="simplemap_divGeocoder_input"
tabindex="0" placeholder="" value="" autocomplete="off" type="text"
data-dojo-attach-point="inputNode"
data-dojo-attach-event="ondijitclick:_inputClick"
role="textbox"

I don't know dojo, but this seems to be saying that it will pass a click event to that "attach-point".

(I don't think the autocomplete="off" is relevant or having an effect. The AutoComplete functionality definitely works when I type in characters manually.)

JohnGravois

thanks for the additional clarification.

i guess you're caught kinda halfway in between here, but to me its starting to sound like you'd be better off using esriRequest() to make your own call to our suggestion service and handling the results however you want.

MattDriscoll

Hi Donald,

You should just be able to call this:

myWidget.set("value", "my location");
myWidget._autoComplete();

It's currently not a public function but it should do what you are looking for I believe.

Let me know if that helps.

I will look into making this function public for a future release.

DonaldWood

Thanks, Matt.

The first statement is working (so I know I'm talking to the right Widget).
But the second statement causes this error: "Uncaught TypeError: undefined is not a function".

I have:
require([..."esri/dijit/Geocoder", ...], function(...esriGeocoder, ...)

But I guess I need to do something more to make that internal function visible.

JohnGravois

donald,

can you put together some sample code? matt's suggestion worked for me...

http://jsfiddle.net/jagravois/Wv4a6/

DonaldWood

Thank you, both.

I can run the code in the jFiddle.

But in my system, the _autoComplete() function is being exposed as _autocomplete().
See image below, from the Developer Tools window in Chrome:

[ATTACH=CONFIG]34514[/ATTACH]

And this code works perfectly for me:

simplemapp.geocoder.set("value", searchString);
simplemapp.geocoder._autocomplete();

So we've solved my problem but created a mystery!

autoComplete.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.