Input field: Address autocomplete Google Places API

Ask the community
,
1

Hi everybody,

I’m trying to integrate an address input field in Editor X and I used the solution offered by @massoudmaboudi (I’m very grateful that he took the time to share it with everybody).
https://www.editorxcommunity.com/forum/showcase/input-field-address-autocomplete-with-google-maps-in-editor-x

While it seems to be working because the repeater expands and collapses according to the number of suggestions that the API returns, it does not return any text suggestion. I made this video so it’s clearer :

And here is my code that is normally exactly what is suggested by Massoud. Do you have any idea of what I could be doing wrong ?

import { autocomplete } from ‘backend/gmapsapi’ ;

function getRandStr ( length = 10 ) {
return Math . random (). toString ( 20 ). substr ( 2 , length )
}

export function inputAddress_input ( event ) {

autocomplete ( $w ( ‘#inputAddress’ ). value )
. then (( res ) => {

let predictions = res . predictions ; // For simplicity we put the predictions in a new variable
let suggestions = ; // We should create an empty array for the suggestions
predictions . forEach ( function ( prediction ) {
let item = { “_id” : getRandStr (), “address” : prediction . description };
suggestions . push ( item );
});
$w ( “#repeaterSuggestions” ). data = ; // clear the repeater contents
$w ( “#repeaterSuggestions” ). data = suggestions ; // add the new suggestions to the repeater
$w ( “#repeaterSuggestions” ). expand (); // Repeater is full now, let’s show it.

})
}
export function repeaterSuggestions_itemReady ( $item , itemData , index ) {
$item ( “#text1” ). text = itemData . address ;

$item ( “#text1” ). onClick (( event ) => {
$w ( ‘#inputAddress’ ). value = $item ( “#text1” ). text
$w ( ‘#repeaterSuggestions’ ). collapse ()

. catch ( ( error ) => {
console . log ( error );
});

}
)}

Thank you all in advance, I’ve been struggling with this for days!

2

Do your Repeater elements have the correct names (IDs)? Add console.log(suggestions) after creating the suggestions array to see what you have in it. You can also add a console.log(predictions) to check on what’s being returned by the autocomplete() function.

You might want to ask the author of the tutorial for assistance.

3

Hi Yisrael, thank you for your help, actually I tried and they both return […]
Also tried console.log(item) and it says item is undefined, don’t know if it’s normal…

4

Please post the URL and explain exactly where and how to see the problem.

5

You don’t have the Repeater connected to the onItemReady() event handler. As you can see in the screenshot, the definition is empty:

646×734 33.8 KB

Or, you can define the onItemReady() function in the page’s onReady() function, something like this:

$w.onReady( function() {
   $w("#repeaterSuggestions").onItemReady( ($item, itemData, index) => {
	// your onItemReady code here...
   });
} );
6

Omg I’m dumb, it works now! Thank you so much Yisrael for taking the time