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.')
  })
}