Autocomplete case insensitive, middle of word

jgriffi6 · February 4, 2020, 9:27pm

Hi,

Been using Bokeh for a couple years now and love it. Recently started using BokehServer and not sure why I hadn’t used it sooner. One thing that I am missing (from an Ajax+JS solution to interact w/ Server) is having a robust Autocomplete option. So two things I’d like to do:

Search within word for possible completions (e.g. option ‘DL: Delta’ shows up when I type ‘Delta’)
Case insensitivity: (e.g. option ‘DL: Delta’ shows up when I type ‘dl’)

Is this already possible? And I am missing how to setup the autocomplete widget properly? If not, where would I play around to try and implement it my self? BokehJS?

Thanks,
Justin

Bryan · February 4, 2020, 9:43pm

Thanks for the kind words @jgriffi6. The build in Autocomplete widget is fairly basic and has not gotten much attention. If you wanted to try extending or improving it, the relevant source file is here:

github.com

bokeh/bokeh/blob/branch-3.0/bokehjs/src/lib/models/widgets/autocomplete_input.ts

import {TextInput, TextInputView} from "./text_input"

import {empty, display, undisplay, div, Keys} from "core/dom"
import * as p from "core/properties"
import {clamp} from "core/util/math"

import menus_css, * as menus from "styles/menus.css"

export class AutocompleteInputView extends TextInputView {
  override model: AutocompleteInput

  protected _open: boolean = false

  protected _last_value: string = ""

  protected _hover_index: number = 0

  protected menu: HTMLElement

  override styles(): string[] {

This file has been truncated. show original

You would need to build BokehJS as described in the Developer’s Guide and run a Bokeh server app to test with the local BokehJS you built (or use BOKEH_RESOURCES=inline for a standalone script). If you want to add new properties for additional configuration options, the corresponding Python class will also need updating to match.

Happy to answer questions/discuss if you actually start tinkering (though the “Development” Category might be a better location than Community Support).

Bryan · February 4, 2020, 9:51pm

One possible idea, since there’s likely an infinite amount of variation and control different users might want or expect, would be to add a property for some sort of CustomJS-like policy that can be used to process the user input and return completions (either from those supplied to the Bokeh model, or potentially even from some external API)

jgriffi6 · February 5, 2020, 6:28am

Hi Bryan,

I’ll play around with the code. Looking at this line:

github.com

bokeh/bokeh/blob/branch-3.0/bokehjs/src/lib/models/widgets/autocomplete_input.ts#L137

    
      
          case Keys.Down: {
            this._bump_hover(this._hover_index+1)
            break
          }
          default: {
            const value = this.input_el.value
          
          
  if (value.length < this.model.min_characters) {
              this._hide_menu()
              return
            }
          
          
  const completions: string[] = []
            const {case_sensitive} = this.model
            let acnorm: (t: string) => string
            if (case_sensitive) {
              acnorm = (t) => t
            } else {
              acnorm = (t) => t.toLowerCase()
            }

I am thinking something like this may work:

text.toLowerCase().includes(value.toLowerCase())

not sure how much performance would be impacted. Also, I seem to remember Explorer not liking the includes function.

If I have something I’ll move to the Dev page and potentially make a merge request. Agreed that having some flexibility would be nice as well.

Thanks,
Justin