1. Home
  2. Blog
  3. Guides développeurs
  4. Recherches multiples avec Woosmap MultiSearch

Recherches multiples avec Woosmap MultiSearch

4 min - Author: Marine
Sommaire
privacy-first

Woosmap Multisearch JS Library helps you integrate a location search box as effectively as possible and cost-effective. With this tiny JavaScript library you can easily combine the following autocomplete services:

Autocomplete services are requested in your desired ordered. By comparing the user input to the returned results and computing a string matching score between these two values, the library can automatically switch to the next autocomplete service and thereby provide suggestions that better suits the needs.

Let’s see two common use cases in which the Multisearch Lib is helpful.

Find an Asset

Your users want to search for available products and services online, and find the best and most convenient location, make an appointment, or pick up an order. They want to get to your location as fast as possible. And you want to give them efficient online experiences that drive more visits to your physical locations, reduce calls to your customer support and increase user satisfaction.

The Multisearch can be implemented to find your point of interest by searching a city, a postal code or directly into your store’s names. We recommend the following api call order to address such case:

const multisearch = window.woosmap.multisearch({
   apiOrder: ["stores", "localities", "address"],
   /*...*/
});
privacy-first

Autofill an Address Form

Does your application include an address form, such as the shipping address for an online order, a credit card billing address, or a ridesharing booking form? Woosmap MultiSearch Library can help users supply the details.

For this example, as the form focus on searching addresses, put the api order like this:

La bibliothèque Woosmap Multisearch JS peut être utilisée dans de nombreux secteurs : retail, restauration, livraison à domicile, covoiturage, hôtellerie et services financiers.

McDonald's France a été l'un de nos premiers clients à intégrer cette bibliothèque sur sa plateforme de recrutement. Testez la fonctionnalité d'autocomplétion Multisearch en direct : Plateforme de recrutement McDonald's FR

Quelle configuration pour mon cas d'usage ?

La bibliothèque implémente un système de repli permettant de passer d'une API à l'autre. Lorsque le score de suggestion est inférieur à la valeur fallbackBreakpoint définie, la bibliothèque cesse d'interroger l'API concernée et bascule vers la suivante (selon l'ordre des API). Ce système est flexible et peut être ajusté manuellement pour chaque API afin d'être optimal pour chacun de vos cas d'usage spécifiques.

Une valeur par défaut est définie pour chaque API :

Si vos utilisateurs cherchent avant tout à localiser un établissement (par nom de magasin, ville ou code postal), utilisez la configuration suivante :


const multisearch = window.woosmap.multisearch({
    apiOrder: ["stores", "localities", "address"],
    store: {
        key: "woos-xxx",
        fallbackBreakpoint: false
    },
    localities: {
        key: "woos-xxx",
        fallbackBreakpoint: 0.3
    },
    address: {
        key: "woos-xxx",
        fallbackBreakpoint: 1
    }
});

Si vos utilisateurs recherchent principalement une adresse, utilisez la configuration suivante :


const multisearch = window.woosmap.multisearch({
    apiOrder: ["localities", "address", "places"],
    localities: {
        key: "woos-xxx",
        fallbackBreakpoint: 0.4,
        params: {
            types: ["address"]
        }
    },
    address: {
        key: "woos-xxx",
        fallbackBreakpoint: 0.5
    },
    places: {
        key: "AIzaXxx",
        params: {
            types: ["address"]
        }
    }
});