You may also use your own version of jquery. Note that jQuery must be included first as the Geocoder-Widget extends jQuery.
Next you must include a text input field on your page, which must have the CSS classes bc-geocoder and typeahead, and may have various other options as shown and documented below:
<input type="text" class="bc-geocoder typeahead" data-template="simple" data-output-S-R-S="4326" data-max-Results="8" data-min-Score="0" data-set-Back="0" data-echo="false" data-interpolation="adaptive" data-location-Descriptor="any" data-callback="showCoords" autocomplete="off" placeholder="Find a place"/>
Here is a description of the attributes which can be used to configure the Address Finder Widget:
The input field must have the classes "bc-geocoder" and "typeahead". Other additional styles can be applied.
This specifies the Spatial Reference System to use for the output coordinates, using standard EPSG codes. The list of acceptable code is specified here.
The template determines how to display the individual results in the drop-down list. This can be set to either "simple" or "accuracy", which correspond to the lists shown above in the simple and advanced examples.
This specifies the maximum number of results to show in the drop-down list while the user is typing.
This specifies the minimum score of results to return. Any results with a score less than the specified minimum will not be returned.
This specifies the distance from the street curb to set back the returned point, in meters. By default the returned point is intended to be located on the curb.
If echo is set to true, site name and unit number details will be echoed back as part of the results even if they are not actually matched.
This specifies the allowable method of interpolation. By default, "adaptive" interpolation is used. Alternatively, "linear" or "none" can be specified.
This specifies the type of location point to return, one of "any", "accessPoint", "frontDoorPoint", "parcelPoint", "rooftopPoint", or "routingPoint".
This specifies a bounding box to filter the results, specified as "minx,miny,maxx,maxy" in the output-SRS coordinate system.
This specifies the centre point of a distance filter, specified as "x,y" in the output-SRS coordinate system. Must also use data-distance.
This specifies the maximum distance from the centre point which results may be, in meters, relative to the point specified in data-centre.
This specifies a list of locality names which results must be in one of. The list must be comma-delimited and must contain exact spellings of locality names and so is not generally suitable for user input.
This specifies a list of locality names which results must not be in. The list must be comma-delimited and must contain exact spellings of locality names and so is not generally suitable for user input.
This specifies a list of MatchPrecision values which results must have one of. The list must be comma-delimited and may contain any of the MatchPrecision values: "occupant", "unit", "site", "civic_number", "intersection", "block", "street", "locality", "province"
This specifies a list of MatchPrecision values which results must have none of. The list must be comma-delimited and may contain any of the MatchPrecision values: "occupant", "unit", "site", "civic_number", "intersection", "block", "street", "locality", "province"
The browser's autocomplete should set "off" in order to allow the widget's internal autocomplete to function correctly
This specifies the "placeholder" text to display in the field before a user has edited it.
For more information on these geocoder parameters, see page 7 of the REST API documentation