Editable list items with search feature - How to handle search when there are unsaved changes?

Question

Suppose a UI with a list of editable texts, and with a search feature (searching text contents) like this mockup:

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

Since searching in data with unsaved changes might be rather unpredicatable, my question is:

How to handle search when there are unsaved changes?

• Should the search field be disabled until the user clicks Save changes?
• When the search field receives focus, should the user be prompted to save changes?
• ...?

Answer 1

My opinion is that the text must be saved to be 'part' of searchable data. That is a standard approach. If for some reason, there is a requirement for you to be able to search unsaved text also, then its a different thing.

On search focus, you can 'auto save' or 'prompt-save' or just plain ignore the unsaved changes in your search results. But searching only saved data seems right.

Disabling search and too much prompting for unsaved changes... will cause work flow issues, who likes to be interrupted ?

Answer 2

There are a couple of aspects to this. One is adding a list item, other is editing a list item.

If you are adding a list item, once it is added it is saved. Now that item can be searched for.

If you are editing, let there be an edit view where the search field will display results for all the editable and non-editable item(s).

Prompting to save the results when focused on the search field might not give a very good user experience. Some cases where prompt can be used:

1. User has not saved the changes and is trying to navigate somewhere else
2. Confirmation(sort of)

Now, when the user clicks on the search field there is no such situation where there should be a prompt shown. The user is not doing something which will cause the unsaved data to be removed.

A better approach to this whole scenario would be to provide a edit view which will be meant just for editing. It will also have a search field which can be used to search over a list of editable/non-editable items. This way, a more focused design can be achieved and there would be less chances for the user to make a mistake. And if the user is navigating out of the edit view before saving it, you can show an alert saying "There are changes unsaved. Do you want to save it?"

Isolation can help project the design clearly. When the user enters the edit mode, move to a view where the list items are editable. Once it is saved, get back to the normal view. This way the user can search on data based on the view which is currently active.

Hope I could help with some thoughts if not the solution.

Edit details: Changed answer to provide search on both edit and normal view.