Nokia OVI map autocomplete feature

I am using google API to autocomplete feature of user address. and its working fine.
But now I want to use Nokia OVI Map for address autocomplete feature.

Please help me how to implement the same.

  • Autocomplete attribute using ReactJS
  • Trap the enter key, but not when choosing the browser's autocomplete suggestion
  • jQuery UI autocomplete field not submitting when pressing enter
  • Error with jquery-autocomplete in rails
  • InputMask with Autocomplete
  • Getting the Index of the selected item in jquery auto complete
  • I am using below code

    <div id="customSearchBox" class="main-search">
            <span class ="caption">Search For Places:</span>
            <div module="SearchBox">
                <input rel="searchbox-input" class="search-box-bckgrnd" type="text" />
                <div rel="searchbox-list" class="search-list"></div>
            </div>
        </div>
        <script>
            var customSearchBox = new nokia.places.widgets.SearchBox({
                targetNode: 'customSearchBox',
                template: 'customSearchBox',
                searchCenter: function () {
                    return {
                        latitude: 52.516274,
                        longitude: 13.377678
                    }
                },
                onResults: function (data) {
                   //here you have access to data
                   alert(data);
                }
            });   
        </script>
    

    How to get lat, long in this code

    Thanks
    Shivam

  • Autocomplete for mobile web apps
  • Narrow a list of items as you type with javascript
  • Jquery autocomplete, how to search on words instead of string
  • jQuery autocomplete : hide items based on ID
  • Any event triggered on autocomplete?
  • Conflict with 2 javascript files
  • 2 Solutions collect form web for “Nokia OVI map autocomplete feature”

    I got answer of my question by reading document of OVI map.

    <script>
            var customSearchBox = new nokia.places.widgets.SearchBox({
                targetNode: 'customSearchBox',
                template: 'customSearchBox',
                searchCenter: function () {
                    return {
                        latitude: 52.516274,
                        longitude: 13.377678
                    }
                },
                onResults: function (data) {
                   //here you have access to data
                   //var a=getData();
                   renderResults(data);
                   //alert(data.results[0]);
                }
            });  
    
            function renderResults (data) {
            var previewList = document.getElementById ('results');
            previewList.innerHTML = '';
    
            var results = data.results;
    
            for (var i = 0, l = results.length; i < l; i++) {
                var result = results[i];
                var resultLi = document.createElement ('li');
                resultLi.innerHTML = result.place.name+" - Lat:"+result.place.location.position.latitude+" Long:"+result.place.location.position.longitude;
                //alert(result.place.location.position.longitude);
                previewList.appendChild (resultLi);
            }
        }
    
        </script>
    

    I hope this will help to someone.

    Thanks
    Shivam

    for jQuery you can do it like this with a textfield, because i don’t wanted to use the predefined “searchbox widget”:

    $('#location_address').autocomplete({
        focus:function (event, ui) {
            return false;
        },
        search:function () {
            $(this).addClass('working');
        },
        open:function () {
            $(this).removeClass('working');
        },
        select:function (event, ui) {
            var position = ui.item.id.split(";");
            var coord = new nokia.maps.geo.Coordinate(parseFloat(position[0]), parseFloat(position[1])) 
    
            $('#location_address').val(ui.item.label)
            $('#location_longitude')[0].value = coord.longitude;
            $('#location_latitude')[0].value = coord.latitude;
            map.setCenter(coord, "default");
            map.setZoomLevel(16); 
        },
        source:function (request, response) {
            var searchCenter = {
                latitude:52.516274,
                longitude:13.377678
            };
            nokia.places.search.manager.findPlaces({
                searchTerm:request.term,
                onComplete:function (data, status) {
    
                    var nData = data.results.map(function (val, i) {
                        return {
                            value:val.place.name,
                            id:val.place.location.position.latitude + ";" + val.place.location.position.longitude
                        };
                    })
                    response(nData);
    
                },
                searchCenter:searchCenter,
                didYouMean:5
            });
        },
        minLength:2
    });