selectize.js 和闪亮:select 来自远程的选择 API
selectize.js and Shiny : select choices from a remote API
由于之前没有 JavaScript 和 API 的编程知识,我在使这个示例满足我的需要时遇到了一些麻烦:select GitHub repo。
我正在尝试使它适应这个 API: https://api-adresse.data.gouv.fr/search/? .
响应是一个 GeoJSON 文件,其中的特征存储在 response$features 中。我想获取每个功能的 properties$label 属性。
这是我到目前为止所做的。我得到一个数组,但项目没有显示在下拉列表中...
UI :
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'properties.label',
labelField = 'properties.label',
searchField = 'properties.label',
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.properties.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function(res) {
console.log(res.features);
callback(res.features);
}
});
}"
)
))
)
)
服务器:
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}
感谢您的帮助。
由于 this 评论,它开始工作了。
selectize doesn't support accessing nested values with dot notation
UI:
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'name',
labelField = 'name',
searchField = 'name',
loadThrottle = '500',
persist = FALSE,
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function (data) {
callback(data.features.map(function (item) {
return {name: item.properties.name,
label: item.properties.label,
score: item.properties.score};
}));
}
});
}"
)
))
)
)
服务器:
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}
由于之前没有 JavaScript 和 API 的编程知识,我在使这个示例满足我的需要时遇到了一些麻烦:select GitHub repo。 我正在尝试使它适应这个 API: https://api-adresse.data.gouv.fr/search/? .
响应是一个 GeoJSON 文件,其中的特征存储在 response$features 中。我想获取每个功能的 properties$label 属性。
这是我到目前为止所做的。我得到一个数组,但项目没有显示在下拉列表中...
UI :
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'properties.label',
labelField = 'properties.label',
searchField = 'properties.label',
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.properties.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function(res) {
console.log(res.features);
callback(res.features);
}
});
}"
)
))
)
)
服务器:
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}
感谢您的帮助。
由于 this 评论,它开始工作了。
selectize doesn't support accessing nested values with dot notation
UI:
########
# ui.R #
########
library(shiny)
fluidPage(
title = 'Selectize examples',
mainPanel(
selectizeInput('addresses', 'Select address', choices = '', options = list(
valueField = 'name',
labelField = 'name',
searchField = 'name',
loadThrottle = '500',
persist = FALSE,
options = list(),
create = FALSE,
render = I("
{
option: function(item, escape) {
return '<div>' + '<strong>' + escape(item.name) + '</strong>' + '</div>';
}
}" ),
load = I("
function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api-adresse.data.gouv.fr/search/?',
type: 'GET',
data: {
q: query
},
dataType: 'json',
error: function() {
callback();
},
success: function (data) {
callback(data.features.map(function (item) {
return {name: item.properties.name,
label: item.properties.label,
score: item.properties.score};
}));
}
});
}"
)
))
)
)
服务器:
############
# server.R #
############
library(shiny)
function(input, output) {
output$github <- renderText({
paste('You selected', if (input$github == '') 'nothing' else input$github,
'in the Github example.')
})
}