[TIMOB-25482] iOS: SearchBar "No Results" in ListView is not showing on ItemTemplate label in 6.2.2.GA and later

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2018-10-17T16:16:21.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	Navistar
Reporter	Mostafizur Rahman
Assignee	Vijay Singh
Created	2017-11-05T17:02:17.000+0000
Updated	2018-10-17T16:16:21.000+0000

Description

Hello, SearchBar "No Results" in ListView is not showing on ItemTemplate label in 6.2.2.GA and later but it works on lower SDKs. *Test Environment:* Operating System Name = Mac OS X Version = 10.13 Architecture = 64bit # CPUs = 4 Memory = 8589934592 Node.js Node.js Version = 6.10.3 npm Version = 3.10.10 Titanium CLI CLI Version = 5.0.14 Titanium SDK SDK Version = 6.3.0.GA, 6.2.2.GA, 6.1.1.GA *Test Code:* Added the test code *index.xml*, *index.js* and *index.tss* file on the attachment *Output Results:* SearchBar "No Results" in ListView is not showing on ItemTemplate label in 6.2.2.GA and later but showing on 6.1.1.GA(see the attachment image). *Expected Results:* SearchBar "No Results" in ListView shows on ItemTemplate label.

Attachments

File	Date	Size
6.1.1.GA.png	2017-11-05T16:54:49.000+0000	54379
index.js	2017-11-05T16:48:27.000+0000	1659
index.tss	2017-11-05T16:48:12.000+0000	792
index.xml	2017-11-05T16:47:49.000+0000	709

Comments

Vijay Singh 2017-11-06

Before 6.2.0, for search in iOS there was getting used UISearchDisplayController. If there is nothing found while searching, UISearchDisplayController manages to show “No Results” natively. There was nothing added from titanium side for this. In 6.2.0, we have replaced UISearchDisplayController with UISearchController as UISearchDisplayController got deprecated in iOS 8.0 . UISearchController do not show anything similar to “No Results” if there is nothing found while searching. Due to this “No Results” is shown in 6.2.0 and above. So this is native behavior of iOS.
Hans Knöchel 2017-11-06

I agree with [~vijaysingh], this has been a change by Apple to allow more flexible empty-states. If desired, we can provide a code-snippet that recreates the "No results" label via a simple list-template. Let us know!
Hans Knöchel 2017-11-16

I just tried it out and it seems to be a valid issue: While it is the expected behavior to not show the "No results" automatically because of the newer Apple API's, I am unable to display an own placeholder either, because the search-controller is presented over the current view-controller index. We should fix this inside the search-implementations instead. Read more [here](https://stackoverflow.com/a/4840621/5537752).
Hans Knöchel 2018-01-18

[~vijaysingh] I think your recent changes fix this as well. Can you confirm?
Vijay Singh 2018-01-19

[~hknoechel] This is native behavior, if we use UISearchController. But from 7.0.2 onward, we can give workaround to add our own placeholder because we are using same tableview to show result.

Vijay Singh 2018-04-24

Test Case -

   var rows = [];
   for (var i = 0; i < 20; i++) {
       rows.push({ properties: { title: 'Row '+ i , backgroundColor: 'red', searchableText:'Row '+i}});
   }
   var win = Ti.UI.createWindow({
     title: 'TEST',
     backgroundColor: '#ffffff',
   }); 
   var sb = Ti.UI.createSearchBar();
    
   var ls = Ti.UI.createListSection({
     items: rows
   });
    
    var lv = Ti.UI.createListView({
       //top : 100,
       sections: [ls],
       searchView: sb,
   });
    
   sb.setHintText("test");
    sb.addEventListener('change', function(e){
     Ti.API.info(e.value);
   });
    
    //when the return key is hit, remove focus from our searchBar
   sb.addEventListener('return', function(e){
     sb.blur();
   });
   lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
   });
   
   lv.addEventListener('noresults', function(e) {
   	Ti.API.info('no result found');
   });
    
   win.add(lv);
   win.open();

Vijay Singh 2018-04-24

From SDK 7.0.2 onwards following workaround can help -

   var rows = [];
   for (var i = 0; i < 20; i++) {
       rows.push({ properties: { title: 'Row '+ i , backgroundColor: 'red', searchableText:'Row '+i}});
   }
   var win = Ti.UI.createWindow({
     title: 'TEST',
     backgroundColor: '#ffffff',
   }); 
   
   //Create label with no text
   var label = Ti.UI.createLabel({
   	text: '',
   	color: 'lightgray',
   	font: {
   		fontWeight: 'bold',
   		fontSize: 22
   	},
   	backgroundColor: 'transparent'
   });
   
   var sb = Ti.UI.createSearchBar();
    
   var ls = Ti.UI.createListSection({
     items: rows
   });
    
    var lv = Ti.UI.createListView({
       sections: [ls],
       searchView: sb,
   });
    
   sb.setHintText("test");
    sb.addEventListener('change', function(e){
     label.text = '';
   });
    
    //when the return key is hit, remove focus from our searchBar
   sb.addEventListener('return', function(e){
     sb.blur();
   });
   
   sb.addEventListener('cancel', function(e){
     sb.blur();
     label.text = '';
   });
   
   lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
   });
    
   lv.addEventListener('noresults', function(e) {
   	// Set text 'No Results' to label
   	label.text = 'No Results';
   });
   
   //Add label on listview
   lv.add(label);
   
   win.add(lv);
   win.open();

JSON Source