Onemap搜索API自动完成建议未显示

发布于 2025-01-26 19:10:08 字数 3552 浏览 2 评论 0原文

这是我第一次在Stack Overflow中发布，因为我一直在寻找解决方案超过一个星期，似乎找不到答案。

在这里，我想使用onemap搜索API搜索特定的新加坡区域，我从 https://www.geeksforgeeks.org/autocomplete-search-using-jquery-and-jquery-and-wikipedia-opensearch-api/ 并做出了一些更改。使用Wikipedia OpenSearch API时，它的工作原理非常好。

谁能通过提供建议在为“小印度”（Little India）等新加坡地区打字时提供搜索和显示自动完整的建议来帮助我吗？任何帮助将不胜感激，谢谢。

请参阅以下现有代码：

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风也等你 2025-02-02 19:10:08

我通过使用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>

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>

回复收藏 0 原文

~没有更多了~