Skip to main content Skip to footer

Adding autocomplete text using Xuni iOS AutoComplete

Mobile app developers are always trying to expedite user interactions to make navigation faster and easier. Autocomplete is a feature many users have come to take for granted since it makes keyboard input much easier. Reducing typing as well as suggesting results speeds up user input, and helps reduce spelling errors and typos. We recently introduced a number of new input controls in the 2016v2 Xuni release. In this article we’ll examine how you can use the Xuni AutoComplete control to improve your iOS apps.

Getting started with Xuni AutoComplete

The AutoComplete control acts like a modified UITextField that provides suggestions in a dropdown UITableView underneath. HighlightedAuto At the most basic level, you can set a list of suggestions by setting the itemsSource of the control to an NSMutableArray of suggestions.


    myAutoComplete.itemsSource = [States demoData];  

You’ll need to set the displayMemberPath the name of the property you wish to use as the suggestions to populate your list.


    myAutoComplete.displayMemberPath = @"name";  

There are a few basic properties available to customize the control. You can control the number of suggestions, the length of the text entry before suggestions kick in, highlighting matching substrings in the suggestions list with a specific color, and the delay before suggestions appear.


    myAutoComplete.maxItems = 5;  
    myAutoComplete.minLength = 3;  
    myAutoComplete.hightlightedColor = [UIColor clearColor];  
    myAutoComplete.delay = 5;  

AutoCompletes

Advanced Tweaks

The autocomplete control also offers some advanced configuration possibilities. Since the dropdown list of suggestions is essentially a UITableView, you can implement the UITableViewDelegate and UITableViewDataSource to more completely customize the suggestion list. This allows you to customize the cells with other views such as images to make your suggestion list more visually interesting. CustomAuto This type of custom configuration can be done in much the same way you'd customize a UITableView. Using several of the methods from the UITableViewDelegate, you can provide custom content for each cell. The code below illustrates the similarities.


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  
    return _customDropdown.temporaryItemSource.count;  
}  
- (UITableViewCell *)tableView:(UITableView *)tableview cellForRowAtIndexPath:(NSIndexPath *)indexPath {  
    UITableViewCell *cell = [tableview dequeueReusableCellWithIdentifier:@"simpleIdentifier"];  

    if (cell == nil){  
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"simpleIdentifier"];  
    }  

    UIView *selectedBackgroundView = [[UIView alloc] init];  
    selectedBackgroundView.backgroundColor = [UIColor blueColor];  
    cell.selectedBackgroundView = selectedBackgroundView;  
    [cell.contentView.subviews makeObjectsPerformSelector: @selector(removeFromSuperview)];  

    //provide a custom image in the table  
    CGRect rect = cell.contentView.frame;  
    States \*data = (States \*)[_customDropdown.temporaryItemSource objectAtIndex:indexPath.row];  
    NSString *imageName = data.imageString;  
    UIImageView *image = [[UIImageView alloc]initWithImage:[UIImage imageNamed:imageName]];  
    image.frame = CGRectMake(0, 0, 60, 44);  
    [cell.contentView addSubview:image];  

    //Add label beside image  
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(65, 5, rect.size.width - 65, rect.size.height / 2)];  
    label1.text = data.name;  
    [cell.contentView addSubview:label1];  

    [_customDropdown normalizeCellText:label1 WithSubstring:label1.text];  
    if(_customDropdown.filterString)  
    {  
        [\_customDropdown hilightedSubstring:\_customDropdown.filterString inFilterCellText:label1];  
    }  

    return cell;  
}  
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {  
    _customDropdown.selectedIndex = indexPath.row;  
    _customDropdown.isDropDownOpen = NO;  
}  

Further Input Options

The AutoComplete control is only one of the several new input controls available with Xuni. This release also contains DropDown, MaskedInput, and ComboBox controls in addition to the Autocomplete to further augment Apple's own input controls. Check out the Input101 sample for more information.

MESCIUS inc.

comments powered by Disqus