Listbox Filter

[AppleCored]

Hello!

I am attempting to create a listbox filter, which you can filter out items in the listbox and only select certain ones. I found the filter feature on the ImGui::TestWindow and i was wondering if there is anyway to filter out items with a listbox as well?

https://prnt.sc/gglv0o <-- Filter on Test Window
https://prnt.sc/gglv38 <-- Fitering

Replace the bullet points with a ListBox.

Many thanks

(ADMIN Attachment fairy, attached pictures before they disappear from prnt.sc)

[ocornut]

Look at the implementation of ListBox() for a reference.

Basically you can replace it with:

if (ListBoxHeader("label", size))
{
  // .. output your own items using Selectable()
   ListBoxFooter();
}

[AppleCored]

Thanks, finally got it working!

static ImGuiTextFilter filter;
			const char* lines[] = { "A","B", "C", "D","E" ,"F", "G", "H", "I" };
			if (ImGui::ListBoxHeader("", IM_ARRAYSIZE(lines), 10))
			{
				bool value_changed = false;
				ImGuiListClipper clipper(IM_ARRAYSIZE(lines), ImGui::GetTextLineHeightWithSpacing());
				while (clipper.Step())
					for (int i = clipper.DisplayStart; i < clipper.DisplayEnd; i++) {
						const bool item_selected = (i == *&opt.mainscroll);
						const char* item_text;
						if (!items_getter(lines, i, &item_text))
							item_text = "*Unknown item`*";

						
						ImGui::PushID(i);
						if (filter.PassFilter(item_text))
						{
							if (ImGui::Selectable(item_text, item_selected))
							{
								*&g_Options.main_selected_feature = i;
								value_changed = true;
							}
						}
						
						
						ImGui::PopID();
					}
				ImGui::ListBoxFooter();
			}
			
			filter.Draw("");

Sorry if the text is appearing weird, idk how to fix!

[ocornut]

With github you can use triple-backquote to enclose text.

You'll have a problem here with the clipper because it'll relies on the number of items, which is affected by your custom filtering. I don't have a trivial solution to suggest for now.

[AppleCored]

There ya go, fixed. Hopefully that's a bit easier on the eyes. I am quite new to ImGui so sorry if it is a bit ugly to look at. I think implementing a filter option and expanding on the idea would be very good for ImGui and allow a lot more ideas to be added, including complex data searching!

[AppleCored]

I am still occurring some errors while scrolling, for example lower items on the listbox while filtered and scrolled up will disappear. Anything you can think of in that code to help fix/reduce this?

It seems like the clipper isnt removing the item from the list but just not drawing the items which dont work with the filter. It also doesn't reduce the length of the scroll bar. Anyway to completely remove the items which dont match rather than just not drawing them?

[ocornut]

As suggested above, the clipper is expecting N item and you are filtering some away, so it is moving the cursor vertically accounting for those N items. The clipper could be reworked to allow for an UNKNOWN number of items (as we don't know pre-filtering) and then you would have to treat the range e.g. DisplayStart..DisplayEnd as count within the filtered set.

The easy workaround for now is to perform filtering on all items and store the result (e.g. store a list of indices) then pass that to the clipper and use those indices to retrieve your data.

[AppleCored]

Hey. I have tried alot and i am out of ideas. I have tried to reduce the size of the array and remove the certain items and then put that into the clipper but have been unsuccessful.
From looking a bit it seems that the DisplayStart and end show the Length and size of the box.

ImGuiListClipper clipper(IM_ARRAYSIZE(lines), ImGui::GetTextLineHeightWithSpacing());
				while (clipper.Step())
					
					for (int i = clipper.DisplayStart; i < clipper.DisplayEnd; i++) 
					{

I need to somehow change "lines" to my changed and filtered version of "lines
If filter is "A" it needs to transform:
const char* lines[] = { "ABC","CEF", "FEG", "GEA","FAE" }
To:
const char* lines[] = { "ABC", "GEA","FAE" }

And then place that:
ImGuiListClipper clipper(IM_ARRAYSIZE(lines), ImGui::GetTextLineHeightWithSpacing());

And repeat from there.

Again, i am quite stuck on how to do this. Initially i thought about looping through all lines[i] and then removing the letters which do not comply with the filter, but unsuccessfully. Any ideas/help?

[ocornut]

Pseudo-code: ``` static ImVector<const char*> filtered_lines; filtered_lines.resize(0); foreach (line : lines) If pass filter filtered_lines.push_back(line) ``` Then have the clipper work on filtered_lines. Note that it's not the most efficient (if you have several thousands line.. you are paying the filtering cost) but the simplest if you want to benefit from the clipper. You may also updated the filtered_lines set only if the filter changed or the lines changed. Omar

[AppleCored]

Thanks, i appreciate the help and you sticking up with my noobishness. Have a good day

[ocornut]

PS: the reason I am using a persistant (here static, but could be stored anywhere) vector but resizing to 0 every time is to reuse the allocated memory so it will tend to zero allocation per frame if the amount of filtered data doesn't grow. I will post here again if I can update the clipper code to allow for unknown item count, which would make it easier and a little faster to use that sort of pattern. In the end if your app is serious about searching/filtering and dealing with thousanda of items, you'll probably want to retain some sort of data to hold search results anyway.

[AppleCored]

It isn't really serious about filtereing thousands, just a few. Between a hundred and a bit.

I have given up a bit, i attempted to filter but i am quite new to c++ and couldn't quite figure out a way to input my list items into static ImVector<const char*> filtered_lines; and then use that. I could do everything else fine, just not combine the items.

I still think focusing on a dedicated filter system would be a good step forward for ImGui

[ocornut]

and couldn't quite figure out a way to input my list items into static ImVector<const char*> filtered_lines; and then use that.

ImVector is a simplified version of std::vector, you can use std::vector as well. Look up on the internet how it works.

[Lectem]

Sorry for reviving this issue, but I happen to have a huge list that I'd like to be able to filter (to be concrete it is a list of files from a big archive, ~11k elements).

As suggested above, the clipper is expecting N item and you are filtering some away, so it is moving the cursor vertically accounting for those N items. The clipper could be reworked to allow for an UNKNOWN number of items (as we don't know pre-filtering) and then you would have to treat the range e.g. DisplayStart..DisplayEnd as count within the filtered set.

So from what I understood from your comment and the source code, it is not a problem if I reset the cursor myself using SetCursorPos right after the call to ListBoxHeader ?

[ocornut]

So from what I understood from your comment and the source code, it is not a problem if I reset the cursor myself using SetCursorPos right after the call to ListBoxHeader ?

You misunderstood. What the clipper does is to seek the cursor to the top of visible area, give you the range of which items to display, and then seek from the end of the visible area to the end of your list. This requires the clipper to know in advance how many items are in the set.

Ideally you should just store your filtered results (and avoid processing the search every frame) and then as long as you can random-access your result you can just run the clipper on it.

[Lectem]

I see, I was under the impression that it did not matter since the documentation for the constructor mentionned Use INT_MAX if you don't know how many items you have (in which case the cursor won't be advanced in the final step). and it seemed to only be used to clamp the result "display range".

[ocornut]

You can use INT_MAX and move the cursor down after the clipper is done. And to move it you’ll need to know how many item you have in your results. So that all point to you storing your search results (eg list of indexes, or pointers) in a random-accessible format since you don’t want to be performing a search on 11k items every frame.

[ocornut]

With 8bab3ea I have added a ImGuiListClipper::SeekCursorForItem() function which may be used after the end of the clipper stepping loop when you used ImGuiListClipper::Begin(INT_MAX). This makes it easier to work with a clipper if you don't know the number of items ahead of time.