Search suggestions on keyup

Question

I am working on a Here Maps based web application.

I'd like to implement its search suggestions feature to an <input type="text" />which is an input to plan directions.

I'd like to have the search suggestions appear on jQuery's keyup event, in the same manner that google maps has.

This is my code so far:

HTML

<input type="text" name="waypoints[]" id="waypoint-1" class="waypoint" />

A basic jQuery keyup event handler

$('.waypoint').on('keyup', function () {

});

And here's the code that I should use, found in the documentation and the api explorer

var searchBox = new nokia.places.widgets.SearchBox ({
    targetNode: 'waypoint-1',
    searchCenter: function () {
        return {
            latitude: 52.516274,
            longitude: 13.377678
        }
    },
    onResults: function (data) {
        console.log(data.results.items);
    }
});

How can I display search suggestions every time the user releases a key? Where should I put the SearchBox's code in my event handler to respond to that event? Whats the searchCenter parameter?

Answer 1

The JavaScript SearchBox can act as an all-in-one Widget, you don't need to add extra events to handle the key presses. You can initialise it as you have shown, but you'll need to ensure that the targetNode matches the id of a <DIV> already present in the DOM. e.g you could use targetNode = waypoint1 if you include the following

<div id="waypoint1" class="main-search">
  <span class ="caption">Start:</span>
  <div module="SearchBox">
    <input rel="searchbox-input" class="search-box-bckgrnd" type="text" />
    <div rel="searchbox-list" class="search-list"></div>
  </div>
</div>

A working routing example can be found in the HERE Maps Community Examples.

The searchCenter helps to define the location context of the search - it is better described in the RESTful Places Documentation. Specifically it maps onto the at parameter. The other alternative is to attach the widget to an associated map which will supply an in parameter instead. Note that the Widget only starts to give suggestions after typing at least three characters.

It is of course possible to build up your own Widget from scratch using JQuery - just use keyup, create a REST request using the suggest endpoint and parse the resultant String array into a drop-down of your choice.