feat(all): add searchText to TableView

[m1ga]

fixes https://github.com/tidev/titanium-sdk/issues/14316

var win = Ti.UI.createWindow({
	extendSafeArea: false,
	layout: "vertical"
});

var buttons = Ti.UI.createView({
	height: Ti.UI.SIZE,
	layout: "vertical"
});

var btn2 = Ti.UI.createButton({
	title: 'search: hide0 (android, ios)',
});

buttons.add([btn2]);

btn2.addEventListener("click", function() {
	table.filterText = "";
	if (isVisible) {
		table.searchText = "hide0";
	} else {
		table.searchText = "";
	}
	isVisible = !isVisible
});

var tblSection = Ti.UI.createTableViewSection();
var addNumber = 0;
var rows = [];
var isVisible = true;
for (var i = 0; i < 50; ++i) {
	var row = Ti.UI.createTableViewRow({
		height: 50,
	})
	if (addNumber > 2) {
		addNumber = 0;
	}
	var lbl = Ti.UI.createTextField({
		value: "hide" + addNumber,
	});
	row.title = "hide" + addNumber
	row.add(lbl)
	tblSection.add(row);
	rows.push(row);
	addNumber++;
}

var table = Ti.UI.createTableView({
	data: [tblSection]
});

win.add(buttons);
win.add(table);
win.open();

Will add searchText (like in ListView, took the code parts from those files) to the TableView so you can search for rows.

[m1ga]

@hbugdoll maybe you have an idea here:

https://github.com/tidev/titanium-sdk/pull/14317/commits/8a9789da78f7d6ba1dcd1609b90a3f056d713e94#diff-091b65382eb52bdd5bea8e4e965d65b6e044cac879d9e10104ac7a68e18868a8R1605-R1616

I want to use table.searchText = "text" on iOS too. I've copied that part from the listview (like I did on Android) and it's building the index correctly (I've added a log here) and it only adds correct values but it is not updating the TableView data.

You can can the example from the first comment and click on the "search: hide0" button. It should only show "hide0" fields after that. But it is still showing all of them.

[hbugdoll]

@m1ga It took me a while to understand this monster class (iphone/Classes/TiUITableView) 😮‍💨

You're right, the index is built correctly. Concretely, in updateSearchResultIndexes the index searchResultIndexes is updated, which is only used in indexPathFromSearchIndex: and numberOfRowsInSection:. But only if isSearchStarted = YES and that requires [searchController isActive] = YES.

Currently, a Ti.UI.SearchBar is needed:

const searchBar = Ti.UI.createSearchBar();
const table = Ti.UI.createTableView({
	data: [tblSection],
	search: searchBar
});

[hbugdoll]

Adding an additional check of searchString in numberOfRowsInSection:, cellForRowAtIndexPath: and heightForRowAtIndexPath: works for me, see https://github.com/tidev/titanium-sdk/commit/f992e596e3f9aaceca66c662f573b82e541409db:

if ([self isSearchStarted] || self.searchString.length > 0) { ... }

---

Note: After setting table.searchText in the example, the first row with the buttons is of course hidden. Placing the buttons outside the TableView makes it easier to test...

var win = Ti.UI.createWindow({
	extendSafeArea: false,
	layout: "vertical"
});

var buttons = Ti.UI.createView({
	height: Ti.UI.SIZE,
	layout: "vertical"
});

var btn = Ti.UI.createButton({
	title: 'filter: hide0',
});
var btn2 = Ti.UI.createButton({
	title: 'search: hide0',	
});
var btn3 = Ti.UI.createButton({
	title: 'filter: hide0, hide1',
});

buttons.add([btn, btn2, btn3]);

btn.addEventListener("click", function() {
	table.searchText = "";
	if (isVisible) {
		table.filterText = "hide0";
	} else {
		table.filterText = "";
	}
	isVisible = !isVisible
});
btn2.addEventListener("click", function() {
	table.filterText = "";
	if (isVisible) {
		table.searchText = "hide0";
	} else {
		table.searchText = "";
	}
	isVisible = !isVisible
});
btn3.addEventListener("click", function() {
	table.searchText = "";
	if (isVisible) {
		table.filterText = ["hide0", "hide1"];
	} else {
		table.filterText = [];
	}
	isVisible = !isVisible
});

var tblSection = Ti.UI.createTableViewSection();
var addNumber = 0;
var rows = [];
var isVisible = true;
for (var i = 0; i < 50; ++i) {
	var row = Ti.UI.createTableViewRow({
		height: 50,
	})
	addNumber++;
	if (addNumber > 2) {
		addNumber = 0;
	}
	var lbl = Ti.UI.createTextField({
		value: "hide" + addNumber,
	});
	row.title = "hide" + addNumber
	row.add(lbl)
	tblSection.add(row);
	rows.push(row);
}

var table = Ti.UI.createTableView({
	data: [tblSection]
});

win.add(buttons);
win.add(table);
win.open();

https://github.com/user-attachments/assets/89573360-0209-4706-8195-b7847055a31b

[m1ga]

Thank you for the feedback. Don't have my mac with me at the moment but I'll test it beginning of next week!

[m1ga]

Thanks again @hbugdoll ! Working fine. I've also updated the example in my first comment so it is using your code.