Example of editable select value

Questions
1

I’m looking into a way to implement an control that allows to choose a predefined set of values (like a select) or to write a custom value.

Something like: http://indrimuska.github.io/jquery-editable-select/ or https://select2.org/tagging

I’d be glad if someone shows an example with F7 either as normal select or smart select

2

See this: https://stackoverflow.com/questions/2141357/editable-select-element

3

Thanks. I looked at datalist option. Did an example at https://codepen.io/blikblum/pen/VwLggBO

But the experience is inconsistent across browsers (and ios 10 does not support it)

Still looking to an example that uses F7 styling for consistent look and behavior. Thinking in a smart select with a input field like the one with searchbar but that would return the value in input when clicked in a “done” button

4

What about this? https://framework7.io/docs/autocomplete.html

5

What about this? https://framework7.io/docs/autocomplete.html

Using it with all values is a good candidate. I updated the example with an autocomplete: https://codepen.io/blikblum/pen/VwLggBO?editors=1010

But have 2 issues opening it in dropdown may have issues with large number of options. I tried opening it in a page but all the values are not show by default.

I ended using datalist (the browsers that do not support are pretty old)

1 Like