How to combine search and edit in one widget?

Question

Suppose an application where you work with text snippets. You can search for and reuse existing snippets as well as create and edit new snippets.

Thus, we basically have two modes:

• A search mode and
• An edit/create mode

It might look something like this mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

A bit more details:

• All of this interaction takes place in a dialog positioned above a main text editing document (not shown in mockup).
• You can search in both text snippet contents and their keys. However, only the contents are displayed in the Text-field (see mockup above - here the text key field is not shown).
• New snippets are saved, when the "Create new text" button is clicked.
• If a suggestion is selected, the user can reuse this text with the "Reuse text button. Also, the user can return to the search field and enter a new query - or choose to create a new, edited text
• (Obviously) not all search queries have matches.
• Formatting should not be lost when switching between the modes
• Preferably, there should be no modes at all: Perhaps by being able to just press Enter key to add a newline. However, a multiline text edit field with search suggestions is an unfamiliar, probably hard-to-understand new type of widget
• The search includes the text formatting. So, the longer and more heavily formatted text, the less likely there are any search suggestion matches.

The resulting interaction design conundrum is:

• How to combine/switch between these two modes: Search and edit?

Answer 1

^{download bmml source – Wireframes created with Balsamiq Mockups}

You search and the snippets that contain the search term pop up. You can see a preview of their content. You can copy them to your clipboard by pressing the first button, edit them with the second and delete them with the third. The button in the top right corner allows you to create a new snippet.

If you click the create button or an edit button the window changes to the right mockup. If you are done and click the create / update button or if you click the cancel button you get back to the previous window.

Answer 2

Your proposed tool slightly reminds me of the styles palette in Word.

The similarity is that there is a "search" mode (the ability to select a pre-existing style) and an "edit" mode (the ability to add your own style, or customise an existing style and save it as a new style.

If you use the Word styles palette as a design pattern, maybe that would help, as it moves fairly seamlessly from search mode to edit mode.

When you click on "Save selection as a new Quick Style", it gives you the option to modify it.

So you could start with a palette of snippets (maybe with icons for a bulleted list, a numbered list, etc) or a list of snippets if a palette isn't feasible, and offer the option to create a new snippet based on an existing one.

Answer 3

Situation one: You cannot both search and edit at the same time. First user can search and after that user can edit it.

Situation two: User is already editing and meanwhile user wants to search something and edit again.

Show some of the text snippets with a search bar. User can search and enter some text. The file icons are filtered and user can click on them. Editing functions can be visible. When you don't have any matching query, creating a new one can be promoted.

You can show the relevant snippets with file metaphor. Like:

For the second situation purposes, you can place search box on the right top of your solution.I hope that it helps.