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>
这是我第一次在堆栈溢出中发帖,因为我已经搜索了一个多星期的解决方案,但似乎找不到答案。
好了,我想用 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>