MapKit JS Autocomplete Example

Hi. MapKit JS does not offer text input UIs, so it is hard to imagine what kind of generic example we can offer beyond what's already on the slide.

You would be able to inspect the returned value and integrate with the input controls in your application and tailor to your specific needs.

Because the autocomplete does not provide a hi is the reason an example is so valuable. I do not understand why you will not share the code from the WWDC2018 demo or from user profile page. I am asking you to create new content but only to share what you already have. Every other map vendor does this. Please ask Apple management. You create a library because you want people to use it. Thanks.

So I found the autocomplete code for the user profile:

window.addEventListener("load", (function () {
        var t, e, i, n, o, h, u, l, c;
        x.a.init({}), O.mapkitFormElement && window.mapkit && O.mapkitLoaded && (t = function () {
            e.value = "" === e.value ? "" : h, h = e.value, Object(s.a)(i), e.setAttribute("aria-expand", "false"), e.removeAttribute("aria-activedescendant")
        }, window.mapkit.init({
            authorizationCallback: function (t) {
                Object(r.d)().then((function (e) {
                    t(e)
                })).catch((function (t) {
                    console.error("Unable to get token. ".concat(t))
                }))
            }
        }), e = document.querySelector('[data-action="profile-field"][id="profile-location"]'),
            i = document.querySelector('[data-action="map-results"]'),
            n = document.querySelector('[data-action="map-results-aria-live"]'), h = e.value, u = new window.mapkit.Map("map"),
            l = new window.mapkit.Search({
            region: u.region,
            includePointsOfInterest: !1,
            includeQueries: !1,
            includeAddresses: !0
            }),
            c = new window.mapkit.CoordinateRegion(new window.mapkit.Coordinate(37.3316850890998, -122.030067374026), new window.mapkit.CoordinateSpan(.167647972, .354985255)),
            e.value ? l.search(e.value, (function (t, e) {
            t || (t = e.places.map((function (t) {
                var e = new window.mapkit.MarkerAnnotation(t.coordinate);
                return e.title = t.name, e.subtitle = t.formattedAddress, e.color = "#9b6bcc", e
            })), u.showItems(t, {
                minimumSpan: new window.mapkit.CoordinateSpan(.01, .01)
            }))
        })) : u.region = c, e.addEventListener("input", (function () {
            e.value && 2 <= e.value.length && (n.textContent = _store.i18n("profile.settings.a11y.mapkit.searching"),
                l.autocomplete(e.value, (function (r, f) {
                var l, c, p;

                function m(t) {
                    t ? (t.focus(), l.setAttribute("aria-activedescendant", t.id)) : (l.focus(), l.removeAttribute("aria-activedescendant"))
                }!r && f && (o = f.results.filter((function (t) {
                    var e = t.coordinate,
                        i = t.displayLines[t.displayLines.length - 1],
                        r = !1;
                    return L.forEach((function (t) {
                        i.includes(t) && (r = !0)
                    })), e && !r
                })).map((function (t, e) {
                    return '<li class="map-place" role="presentation">\n                <button role="option" id="option-'.concat(e, '" type="button" data-action="map-place" data-latitude="').concat(t.coordinate.latitude, '" data-longitude="').concat(t.coordinate.longitude, '" data-title="').concat(t.displayLines[0], '" data-address="').concat(t.displayLines[0], '">\n                  ').concat(t.displayLines[0]).concat(t.displayLines[1] ? ", ".concat(t.displayLines[1]) : "", "\n                </button>\n              </li>")
                })).join(""), i.innerHTML = o, Object(s.c)(i), e.setAttribute("aria-expand", "true"), (o = i.querySelectorAll('[data-action="map-place"]')).forEach((function (t) {
                    t.addEventListener("click", (function () {
                        var r = parseFloat(t.dataset.latitude),
                            n = parseFloat(t.dataset.longitude),
                            o = t.dataset.title,
                            a = t.dataset.address,
                            f = new window.mapkit.CoordinateRegion(new window.mapkit.Coordinate(r, n), new window.mapkit.CoordinateSpan(.01, .01));
                        u.removeAnnotations(u.annotations), u.region = f, f = new window.mapkit.MarkerAnnotation(new window.mapkit.Coordinate(r, n), {
                            color: "#9b6bcc",
                            title: o,
                            subtitle: a
                        });
                        u.addAnnotation(f), e.value = o, h = o, i.innerHTML = "", Object(s.a)(i), e.setAttribute("aria-expand", "false"), e.focus()
                    }))
                })), n.textContent = Object(a.a)(_store.i18n("profile.settings.a11y.mapkit.resoultsFound"), o.length - 1), c = o, p = t, !(l = e) && c.length || (l.addEventListener("keydown", (function (t) {
                    t.keyCode === d.a.DOWN_KEY && (t.preventDefault(), m(c[0]))
                })), Array.from(c).forEach((function (t) {
                    t.addEventListener("keydown", (function (e) {
                        e.keyCode === d.a.DOWN_KEY ? (e.preventDefault(), m(c[Array.from(c).indexOf(t) + 1])) : e.keyCode === d.a.UP_KEY ? (e.preventDefault(), m(c[Array.from(c).indexOf(t) - 1])) : e.keyCode === d.a.ESC_KEY && (e.stopPropagation(), e.preventDefault(), m(), p())
                    }))
                }))))
            })))
        })), Object(f.a)([e, i], t))
    }))