Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NSTextField with auto-suggestions like Safari's address bar?

What's the easiest way to have an NSTextField with a "recommendation list" dynamically shown below it as the user types? Just like Safari's address bar that has a menu of some sorts (I'm pretty confident Safari's address bar suggestions is menu since it has rounded corners, blue gradient selection, and background blurring).

I've tried using NSTextView's autocompletion facility but found it was inadequate:

  • It tries to complete words instead of the whole text fields – in other words, selecting an autocomplete suggestion will only replace the current word.
  • It nudges the autocompletion list forward and align it with the insertion point instead of keeping it align with the text field.

Sample autocomplete

In the sample screenshot above whenever I selected the autocomplete suggestion the text field only replaces K with the suggested item in the list, which results in Abadi Abadi Kurniawan.

These are what I'd like to achieve:

  • Whenever a suggestion is selected, the entire text field is replaced with the suggestion.
  • Keep the suggestion list aligned with the text field's left side.

Note: This is not a question about adding progress indicator behind a text field.

like image 599
adib Avatar asked Sep 07 '13 15:09

adib


2 Answers

This only addresses half of your answer, but I believe you need to subclass NSTextView and implement the - (NSRange)rangeForUserCompletion method, returning the range of the entire string in the text field. This should make sure that it doesn't just autocomplete the most recently entered word.

If you want a custom menu, you're going to have to do that yourself, probably by implementing the -controlTextDidChange: method and displaying a custom view with a table when appropriate.

like image 60
Rob Keniger Avatar answered Nov 02 '22 08:11

Rob Keniger


The Safari address bar uses a separate window. Apple has example project CustomMenus and it only takes an hour or two to customize it.

Developer session explaining what has to be done Key Event Handling in Cocoa Applications

CustomMenu

If you want to be able to select multiple words you need to provide own FieldEditor (credits should go for someone else)

- (id)windowWillReturnFieldEditor:(NSWindow *)sender toObject:(nullable id)client;
{
    if ([client isKindOfClass:[NSSearchField class]])
    {
        if (!_mlFieldEditor)
        {
            _mlFieldEditor = [[MLFieldEditor alloc] init];
            [_mlFieldEditor setFieldEditor:YES];
        }
        return _mlFieldEditor;
    }
    return nil;
}


-  (void)insertCompletion:(NSString *)word forPartialWordRange:(NSRange)charRange movement:(NSInteger)movement isFinal:(BOOL)flag
{
    // suppress completion if user types a space
    if (movement == NSRightTextMovement) return;

    // show full replacements
    if (charRange.location != 0) {
        charRange.length += charRange.location;
        charRange.location = 0;
    }

    [super insertCompletion:word forPartialWordRange:charRange movement:movement isFinal:flag];

    if (movement == NSReturnTextMovement)
    {

        [[NSNotificationCenter defaultCenter] postNotificationName:@"MLSearchFieldAutocompleted" object:self userInfo:nil];
    }
}
like image 36
Marek H Avatar answered Nov 02 '22 08:11

Marek H