KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  1. 5. Fullstack Development Guide

Tom Typeahead Remote

The io.kvision.form.text.TomTypeaheadRemoteInput component, contained in kvision-tom-select-remote module, is a special component you can use to render a typeahead text field with values loaded from the server. Unlike standard TomTypeaheadInput component (which can also load values from an AJAX source but needs a defined endpoint) TomTypeaheadRemoteInput is bound directly to the method of the remote service. The method signature looks like this:

import dev.kilua.rpc.annotations.RpcService

@RpcService
interface IValueService {
    suspend fun values(search: String?, state: String?): List<String>
}

The search parameter is send with the value entered by the user in the text field. It should be used to filter the returned list of values.

The state parameter allows you to send optional, additional data to the backend service, with the help of the stateFunction parameter of the TomTypeaheadRemoteInput constructor.

To use TomTypeaheadRemote form control, you initialize it with the ServiceManager instance and a callable reference to the right method.

TomTypeaheadRemote(serviceManager = getServiceManager<IValueService>(), 
    function = IValueService::values,
    stateFunction = { someState.toString() },
    label = "Start typing to see appropriate values"
)
PreviousTom Select RemoteNextTabulator Remote

Last updated 25 days ago