Best way to tell user either to select an existing entry or enter new entry

Question

I am designing a web page for mobile devices as I have limited screen space. The web page is used to select a store name from a list of stores (which the user entered earlier) or enters a new store name along with some details about the store.

My idea was to have:

1st line: comboxbox which works like an autocomplete/dropdown list of names of previously entered stores. User either selects or starts typing and list gets filtered as he types.

2nd line: the text 'OR' (to indicate another action the user can take)

3rd and subsequent lines: text fields for capturing information about the new store.

So the user has two actions in this page. Selects an existing store in list and he's done or enters a brand new store including related info.

Other suggestions for creating this. I am not sure what UI elements will be available for me. I will be using jQuery Mobile for the UI.

Answer 1

Selecting an existing store usually is way more common than entering a new one, so putting both actions on the same page doesn't look suitable.

I would recommend to use the drop down box (with a quick search filter if there's more than 2 dozen items), with a last item

Select Store|v
Store A
Store B
Add New store...

Selecting that item could bring up a page to enter store details.

(I am not sure if you can realize the cursive item or the quick search wihtin the combo box with jQuery mobile - but at worst you can fall backto a "normal" combo box).

Alternately, the "Add new item" could be a separate link / button besides the combo. This improves discoverability for novice users, but steals screen estate for a settled state (i.e. when stores are already entered).