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

Question

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.在这里，我想使用 OneMap Search API 来搜索特定的新加坡地区，我从https://www.geeksforgeeks.org/autocomplete-search-using-jquery-and-wikipedia-opensearch-api/获得参考代码并做了一些改变。 It works perfectly fine when the Wikipedia OpenSearch API were used.当使用 Wikipedia OpenSearch API 时，它工作得非常好。

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>

Answer 1

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.我通过使用 map 方法并调用键的名称 ('SEARCHVAL') 来获取其值并将其作为名为 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-30 08:30:41

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-30 08:30:41

解决方案1
1 已采纳 2022-05-30 08:30:41