Search code examples
macoscocoaautocompletesafarinstextfield

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.

Solution

  • 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.