How to use suggestions : algolia places

I’ve placed the following in a laravel blade.php file.

        var placesAutocomplete = places({

            appId: ('{{ env('ALGOLIA_PLACES_APP_KEY') }}'),
            apiKey: ('{{ env('ALGOLIA_PLACES_SEARCH_KEY') }}'),
            container: document.querySelector('#address-input'),
            templates: {
                value: function(suggestion) {
                    return suggestion.name;
                }
            },
            language: 'en', // Receives results in German
            countries: ['us'], // Search in the United States of America
            // type: 'city','postcodes','county',  // Search only for cities names
            // county: ['us'],
            // postcodes: ['us'],
            // aroundLatLngViaIP: true, // disable the extra search/boost around the source IP
            // useDeviceLocation: true
        });

How do we use the county, e.g.? I’ve tried a number of configurations above. The docs page referenced does not show how to use this section.

My hope is to type an address and get:

2828 N Central Ave, Phoenix, AZ, 85282, Maricopa County

Hi @BidBird!
I believe the county field should only be on the suggestion object as seen in the docs here: https://community.algolia.com/places/documentation.html#suggestions.

Have you tried using it as a reconfigurable option and seen it have an effect?

If you’d like to have the county included in the suggestions shown in the dropdown, I would recommend adding it to the suggestion template . ( Each template is a function that will receive a suggestion object and must return a string. The suggestion template determines how a suggestion will be shown in the dropdown.)

For example, something like this would create a suggestion like you’ve shown:

templates: {
  suggestion: function(suggestion) {
    return `${suggestion.name}, ${suggestion.city}, ${
      suggestion.administrative
    }, ${suggestion.postcode}, ${suggestion.county}`;
  }

Note that if any of these values are undefined, “undefined” would show in the results. This code sandbox filters them out, and also adds makes use of the type option to only show addresses.

Hope this is what you’re looking for!

It looks so beautiful when you do it-my hack jobs were not cutting it.

still learning js.

So if the algolia js returns strings, then should my database tables store the same? The goal is to use this to auto populate an address form, then store it. Had originally used integer for address number.

Does algolia use strings because some addresses have letters? please pardon the elementary questions…

Hah, not sure if that’s particularly pretty but it should work. :smiley:

As for the string data-type, this pertains to the templates function because we take the output of what is returned from that function and use it to create a DOM element with that text.

What you use in your DB is up to you, but indeed, since some addresses include letters, it might be prudent to use a string, especially if you’re not planning on doing any numerical querying ( <, >, etc.) on that field. (Which doesn’t seem relevant to an address field in any case.)

1 Like

Not sure if this should be a new post, however, I’ve got it working!

After experimenting, I looked in the database and in the address column get the full address (all other columns populate correctly; e.g. city, state, zipcode, county, country):

2828 North Central Avenue, Phoenix, Arizona, United States of America

Does algolia have a method for using the suggestions we did above to populate the other fields, but only submitting name in the address box?

Had tried making a separate address input to autopopulate but I think that’d get confusing to a visitor with too many address fields.

Is this a string trim type function?

Hi there,
I’m not sure if I understand your question correctly.
Do you want to store a small bit of the address in your database and
later look up at Algolia to get a full address?

If that’s what you intend to do, I guess you could save suggestion.hit.objectID in your database.
You can later retrieve a full suggestion object from objectID.
Refer to this documentation: https://community.algolia.com/places/api-clients.html#rest-api

The code sandbox above shows you how to get object by objectID.

Let me know how it goes and if you have any question.
Have a nice week!

Hi, thank you for the sandbox.

The issue I’m facing is I would like the input to display city, state, zipcode, county and state. This works just fine. like this: https://community.algolia.com/places/examples.html#dynamic-form As the form is filled out the autopopulate puts state in the state input, etc.

However, the search box, the input, submits all the fields in the address input.

Does algolia have a function, a regular expression, etc. that strips all the other fields after the first comma - only in the address input on submit?

e.g. (what I don’t want in the address column of database-it’s redundant)

2828 North Central Avenue, Phoenix, Arizona, United States of America

(what I do want in the address column of database)

2828 North Central Avenue

Is this more something I should do in the validation at the server level? (using laravel and algolia places).

Thank you,

Trevor

Hi Trevor,

I do not have access to your code, so I have a bit of trouble exactly figuring out how you shaped everything, but what you described is definitely doable.

Going back to the suggestion object, you will find in it a name attribute which contains only the street part of the address, which is what you are looking for, if understood you correctly.

So what you can do is modify the template for the input value of Algolia Places to only return the name, like so:

places({
  container: document.querySelector('#form-address'),
  templates: {
    /* --- ADD THIS SECTION --- */
    value: function(suggestion) {
      // this will make it so that the address field only has the name in it,
      // since we populate other fields with the rest of the data
      return suggestion.name;
    },
    /* ------------------------ */
    suggestion: function(suggestion) {
      return `${suggestion.name}, ${suggestion.city}, ${
        suggestion.administrative
      }, ${suggestion.postcode}, ${suggestion.county}`;
    }
  }
})

Let me know if that helps!

Good morning,

That’s great. Really appreciate this, just ordered a js instructional video series, so I hope to improve here in the next few months. Mostly been doing the php stuff…

I’ll have to watch hotjar once the site is launched to see if it causes confusion for the user. I’m not sure if it’s best the whole address populates (then stripping it out on the backend), or if the autocomplete eases a user’s emotions when filling out a form. Sometimes we hit an address but it may have been incorrect.

Nevertheless you saved the day!!!

Thank you,

Trevor

1 Like