OneMap Search API 未显示自动完成建议

OneMap Search API Autocomplete suggestions are not showing

这是我第一次在堆栈溢出中发帖,因为我已经搜索了一个多星期的解决方案,但似乎找不到答案。

好了,我想用 OneMap Search API 来搜索特定的新加坡地区,我从 https://www.geeksforgeeks.org/autocomplete-search-using-jquery-and-wikipedia-opensearch-api/ 那里得到了参考代码并做了一些修改。当使用 Wikipedia OpenSearch API 时,它工作得很好。

任何人都可以帮助我提供建议,以便在输入“小印度”等新加坡地区时能够搜索和显示自动完成建议吗?任何帮助将不胜感激,谢谢。

请参考以下现有代码:

 <!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>

我找到了问题的答案,方法是使用 map 方法并调用键的名称 ('SEARCHVAL') 以获取其值并将其作为名为 searchValues 的变量传递给响应。请在下面查看我的脚本:

<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>