shinyMobile (version 1.0.1)

f7AutoComplete: Framework7 autocomplete input

Description

f7AutoComplete generates a Framework7 autocomplete input.

updateF7AutoComplete changes the value of an autocomplete input on the client.

Usage

f7AutoComplete(
  inputId,
  label,
  placeholder = NULL,
  value = choices[1],
  choices,
  openIn = c("popup", "page", "dropdown"),
  typeahead = TRUE,
  expandInput = TRUE,
  closeOnSelect = FALSE,
  dropdownPlaceholderText = NULL,
  multiple = FALSE,
  limit = NULL
)
updateF7AutoComplete(
  inputId,
  value = NULL,
  choices = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

inputId

The id of the input object.

label

Autocomplete label.

placeholder

Text to write in the container.

value

New value.

choices

New set of choices.

openIn

Defines how to open Autocomplete, can be page or popup (for Standalone) or dropdown.

typeahead

Enables type ahead, will prefill input value with first item in match. Only if openIn is "dropdown".

expandInput

If TRUE then input which is used as item-input in List View will be expanded to full screen wide during dropdown visible. Only if openIn is "dropdown".

closeOnSelect

Set to true and autocomplete will be closed when user picks value. Not available if multiple is enabled. Only works when openIn is 'popup' or 'page'.

dropdownPlaceholderText

Specify dropdown placeholder text. Only if openIn is "dropdown".

multiple

Whether to allow multiple value selection. Only works when openIn is 'popup' or 'page'.

limit

Limit number of maximum displayed items in autocomplete per query

session

The Shiny session object.

Author

David Granjon,

Examples

# Autocomplete input
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
    title = "My app",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7AutoComplete"),
     f7AutoComplete(
      inputId = "myautocomplete1",
      placeholder = "Some text here!",
      dropdownPlaceholderText = "Try to type Apple",
      label = "Type a fruit name",
      openIn = "dropdown",
      choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
       'Orange', 'Peach', 'Pear', 'Pineapple')
     ),
     textOutput("autocompleteval1"),
     f7AutoComplete(
      inputId = "myautocomplete2",
      placeholder = "Some text here!",
      openIn = "popup",
      multiple = TRUE,
      label = "Type a fruit name",
      choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
                  'Orange', 'Peach', 'Pear', 'Pineapple')
     ),
     verbatimTextOutput("autocompleteval2")
    )
   ),
   server = function(input, output) {
    observe({
     print(input$myautocomplete1)
     print(input$myautocomplete2)
    })
    output$autocompleteval1 <- renderText(input$myautocomplete1)
    output$autocompleteval2 <- renderPrint(input$myautocomplete2)
   }
 )
}

# Update autocomplete
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update autocomplete"),
      f7Card(
        f7Button(inputId = "update", label = "Update autocomplete"),
        f7AutoComplete(
         inputId = "myautocomplete",
         placeholder = "Some text here!",
         openIn = "dropdown",
         label = "Type a fruit name",
         choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
                     'Orange', 'Peach', 'Pear', 'Pineapple')
        ),
        verbatimTextOutput("autocompleteval")
      )
    )
  ),
  server = function(input, output, session) {

    observe({
     print(input$myautocomplete)
    })

    output$autocompleteval <- renderText(input$myautocomplete)

    observeEvent(input$update, {
      updateF7AutoComplete(
        inputId = "myautocomplete",
        value = "plip",
        choices = c("plip", "plap", "ploup")
      )
    })
  }
 )
}