UITextField AutoComplete iOS輸入框內文本自動完成

當你打開Safari的時候，輸入網址，會有許多候選網址，點擊後，自動填充到輸入框，進入網頁。

打開詞典查單詞的時候，輸入前面部分字母，軟件會給出符合的候選單詞。

這樣作的目的，是爲了省去用戶繁瑣的輸入，節省時間，提高用戶體驗。

 

　　先上效果圖

今天對基本的UITextField進行改裝，讓其具有此功能。

新建項目後，在Main.storyboard裏，放好UItextField和UIButton。

下一步，使用control+drag將UITextField拖到interface文件裏，選擇outlet，名爲*urlField

同理，UIButton拖進去，選擇IBAction，名爲goPressed

先引入將要使用的3個委託，兩個是UITableView有關，一個用於收回鍵盤

創建兩個Array， pastUrls和autocompleteUrls

創建一個UITableView用於呈現候選數據，下面是interface內代碼

#import <UIKit/UIKit.h>

@class WebViewController;

@interface RootViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, UITextFieldDelegate> 

@property (nonatomic, retain) UITextField *urlField;
@property (nonatomic, retain) NSMutableArray *pastUrls;
@property (nonatomic, retain) NSMutableArray *autocompleteUrls;
@property (nonatomic, retain) UITableView *autocompleteTableView;

- (IBAction)goPressed;
- (void)searchAutocompleteEntriesWithSubstring:(NSString *)substring;

@end

 pastUrls放入匹配的數據，初始化UITableView，並將其隱藏

- (void)viewDidLoad {
  self.pastUrls = [[NSMutableArray alloc] initWithObjects:@"www.google.com", @"www.cnblog.com", nil];
  self.autocompleteUrls = [[NSMutableArray alloc] init];
  
  autocompleteTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 80, 320, 120) style:UITableViewStylePlain];
  autocompleteTableView.delegate = self;
  autocompleteTableView.dataSource = self;
  autocompleteTableView.scrollEnabled = YES;
  autocompleteTableView.hidden = YES;  
  [self.view addSubview:autocompleteTableView];
  
  
  [super viewDidLoad];
}

- (IBAction)goPressed:(id)sender {
  
  // 按下button，收回鍵盤，隱藏UITableView
  [urlField resignFirstResponder];
  autocompleteTableView.hidden = YES;
  
  // Add the URL to the list of entered URLS as long as it isn't already there
  if (![pastUrls containsObject:urlField.text]) {
    [pastUrls addObject:urlField.text];
  }
  
}

 

- (void)searchAutocompleteEntriesWithSubstring:(NSString *)substring {
  
  // Put anything that starts with this substring into the autocompleteUrls array
  // 過濾，剩下符合輸入文字的候選
  [autocompleteUrls removeAllObjects];
  for(NSString *curString in pastUrls) {
    NSRange substringRange = [curString rangeOfString:substring];
    if (substringRange.location == 0) {
      [autocompleteUrls addObject:curString];  
    }
  }
  [autocompleteTableView reloadData];
}

#pragma mark UITextFieldDelegate methods
//當用戶增，刪字符的時候,都會調用此方法
//
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
  autocompleteTableView.hidden = NO;
     
  NSString *substring = [NSString stringWithString:textField.text];
  substring = [substring stringByReplacingCharactersInRange:range withString:string];
  [self searchAutocompleteEntriesWithSubstring:substring];
  return YES;
}

 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger) section {
  return autocompleteUrls.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
  UITableViewCell *cell = nil;
  static NSString *AutoCompleteRowIdentifier = @"AutoCompleteRowIdentifier";
  cell = [tableView dequeueReusableCellWithIdentifier:AutoCompleteRowIdentifier];
  if (cell == nil) {
    cell = [[[UITableViewCell alloc] 
             initWithStyle:UITableViewCellStyleDefault reuseIdentifier:AutoCompleteRowIdentifier] autorelease];
  }
  
  cell.textLabel.text = [autocompleteUrls objectAtIndex:indexPath.row];
  return cell;
}

#pragma mark UITableViewDelegate methods
//將用戶選擇的候選網址，設置到輸入框裏，並調用button的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

  UITableViewCell *selectedCell = [tableView cellForRowAtIndexPath:indexPath];
  urlField.text = selectedCell.textLabel.text;
  
  [self goPressed];
  
}