Search code examples
javascriptpython-3.xtornadowtformsselectize.js

Selectize.js search functionality on client side using tornado wtforms


I have integrated the selctize.js and using it in entire my application. Can not find a way to search the values or text inside the select, because sometimes can be a huge lit of options.

My coffee script for selectize.js

  $('.select').selectize(
    'plugins': ['remove_button'],
    onDropdownOpen: ->
      $('.sidebar_header').css 'z-index', '1'
      $('.selectize-dropdown').mCustomScrollbar({
        scrollInertia: '300'
      })
      return
    onDropdownClose: ->
      $('.sidebar_header').css 'z-index', '9999'
      return
  )

my form generated by python and the choices are given from backed, and by placing inside the template below, i get my select with all the choices:

tornado wtform:

class Form(BaseForm):      

    my_select = SelectPlusInitField(validators=[SelectRequired()])

tornado handler preparing choices for the select:

form.my_select.choices = yield self.my_select_choices

tornado template:

{{ form.my_select(class_='select') }}

template generated html for select:

<select class="select selectized" id="my_select" name="my_select">
    <option value="select" selected="selected">select</option>
    <option value="1" selected="selected">1</option>
    <option value="2" selected="selected">2</option>
</select>
// and below than selectize will generate his style for the above select

and the end result is generating a select with given options from back end, and i would like to add search functionality without back end on client side just, does that is possible?


Solution

  • With the latest version of selectize.js by default search functionality was added after updated to the latest version.