Editable combo box

ionic-v1
1

Hey there,

for my current project I need an editable combo box. So a combination of a text input field and some form of menu where the user can select from a list of predefined values.

Now in my head I can come up with two ways to address this.

  1. Layer an text input over a combo input and bind them to the same model.

  2. Add a button to add text input and show a modal dialog or action sheet or something similar when the user presses the button. Then update the text input with the selection from the menu

Does anyone have a better idea?
What would you do?

My number one concern is usability.

Cheers,
Gregor

2

Can you sketch out what you are suggesting. I’m having trouble visualizing it.

3

Ok, I quickly forked the radio button code pen. Sorry it’s a bit hackish.

This is basically what I’m looking for only that the text field would show the text and not the value from the select.
I guess I would use $watch for that.

4

It’s an interesting concept. However, I don’t think it will fly at all with iOS. I don’t think the iOS select input will allow text input. So… you might want to look at other options.

I have a similar situation in my app. The user needs to select some pre-existing phone numbers or add a new one. I give them a list of numbers as radio buttons and one at the top that says “Add New Number”. If they tap “Add New Number”, an input field slide up above and focus is moved to it. If they select an of the pre-existing numbers, the input field disappears.

It works okay, but sort of kludgy because I need to track 2 modals variables.

5

The select doesn’t allow text input. There’s a separate text input that receives the user input. It’s layered over the select so that only the drop down button is visible.

I’ve updated the codepen with a watcher. Now it’s basically exactly what I’m looking for.

I guess I’ll have to try it out on my mobile and see how it behaves there.

6

I tried it via mobile Safari. Safari pulls up the combo spinner and I can choose the different predefined options. I can even tap inside the input. However, I can’t change the input at all.

Neat concept, but I think you’ll run into nightmares making it work on mobile devices.

7

Thanks for your feedback Calendee.

I’m still battling with the Android emulator so far I only managed to test it in Ripple.

I’ll reply once I find a working solution.

8

Just managed to test this with the Android emulator.

I modified the code a bit and used a text input next to a select which I shrank so that it’s only as width as the arrow button part.

Works really well.

Wonder what the problem with Safari is.

We’re currently focused on Android so I’l have to take a look at iOS at a later point.

9

Hi,

I am looking for an editable combo box. As this discussion is from 2014, is there any packaged component or source code that I could use for that (in Ionic 1, not Ionic 2)?

Many thanks!