CODEWITHSUNDEEP
javascriptajaxapisearchautocomplete
rannp05
rannp05

Reputation: 11

OneMap Search API Autocomplete suggestions are not showing

it's my first time posting in stack overflow because I've been searching for solutions for more than a week and can't seem to find the answer.

Here it goes, I wanted to use the OneMap Search API for searching specific Singapore areas, I got the reference codes from https://www.geeksforgeeks.org/autocomplete-search-using-jquery-and-wikipedia-opensearch-api/ and made some changes. It works perfectly fine when the Wikipedia OpenSearch API were used.

Can anyone help me by providing suggestions to be able to search and display the autocomplete suggestions when typing for Singapore areas like "Little India"? Any help would be greatly appreciated, thank you.

Please refer to the existing codes below:

 <!DOCTYPE html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <link rel="stylesheet" href="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
    </script>

    <style>
        body {
            width: 100%;
            background: #e9e9e9;
            margin: 0 auto;
            padding: 0;
            color: #7faf7f;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        #searchID input {
            width: 350px;
            height: 20px;
            margin: 0;
            padding: 15px;
            background: #fff;
            border: 1px solid black;
            color: #727272;
            float: left;
            font: 12px "Lucida Sans Unicode", sans-serif;
            transition: background 0.4s ease-in-out 0s;
        }

        #searchID button {
            width: 45px;
            height: 45px;
            text-indent: -9999em;
            background:  #4eac10;
            transition: background 0.3s ease-in-out 0s;
            border: 1px solid #fff;
        }

        #containerID {
            width: 50%;
            margin: 0 auto;
        }

        h2 {
            color: green;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="containerID">
            <form method="get" id="searchID">
                <input type="text" class="searchClass"
                    id="searchInputID" value="" />
                <button type="submit">Search</button>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        $(".searchClass").autocomplete({
            source: function (request, response) {
                console.log(request.term);
                var suggestURL = "https://developers.onemap.sg/commonapi/search?returnGeom=N&getAddrDetails=N&searchVal=%QUERY";
                suggestURL = suggestURL.replace('%QUERY', request.term);
        
                // JSON Request
                $.ajax({
                    method: 'GET',
                    jsonCallback: 'jsonCallback',
                    url: suggestURL,
                    // "http://en.wikipedia.org/w/api.php",
                    dataType: "application/json",
                    data: {
                        // action: "opensearch",
                        // Output format
                        format: "application/json",
                        search: request.term,
                        namespace: 0,

                        // Maximum number of result
                        // to be shown
                        limit: 8,
                    },
                })
                .success(function(data) {
                    response(data[4]);
                });
            },
        });
    </script>
</body>

</html>

Upvotes: 0

Views: 385

Answers (1)

rannp05
rannp05

Reputation: 11

I figured out the answer to my problem, through using map method and calling the name of the key ('SEARCHVAL') to get its value and passing it to response as a variable called searchValues. Please see my script below:

<script type="text/javascript">
    $(".searchClass").autocomplete({
    source: function (request, response) {
    var oneMapURL = "https://developers.onemap.sg/commonapi/search?returnGeom=N&getAddrDetails=N&searchVal=%QUERY";
    URL = oneMapURL.replace('%QUERY', request.term);
        
     // JSON Request
     $.ajax({
         url: URL,
         dataType: "json",
         data: {
        // Output format
         format: "json",
         search: request.term,
         namespace: 0,
         },
      })
         .success(function(data) {
             var sgAreas = data.results;
             var searchValues = sgAreas.map(function(sgArea) {
             return sgArea['SEARCHVAL'];
             });
             response(searchValues);
             });
         },
    });
    </script>

Upvotes: 1

Related Questions