Add Autocomplete to search

[Horttcore]

An autocomplete is missing for the search form on the developer reference page ( ​https://developer.wordpress.org/reference/ ). This would make the site much more efficient.

I'm suggesting to use Twitters Typeahead ( ​https://github.com/twitter/typeahead.js ) or even simple datalists.

[nicole@…]

Add autocomplete using jquery ui autocomplete

[keesiemeijer]

Autocomplete using the Awesomplete widget from Lea Verou

[keesiemeijer]

autocomplete

[keesiemeijer]

The ​Awesomplete widget has been verified to work in IE9 (sorta), IE10+, Chrome, Firefox, Safari 5+, Mobile Safari!

I did not test this in IE.

[keesiemeijer]

Add partial matches for autocomplete list

[keesiemeijer]

in patch 542.2 words with spaces are matched to functions, hooks, etc. with underscores in them. Also partial matches are matched. Doing a search for "post get" will have "get_posts" in the autocomplete list

[keesiemeijer]

Works and displays correctly in IE9 and up. It degrades gracefully (to the current state) in lower versions.

[coffee2code]

In 2359:

developer.wordpress.org: Add autocomplete to search input field.

Props keesiemeijer.
Fixes #542.

[ocean90]

Nice job @keesiemeijer!

I think we have to filter the results with array_unique() before adding them the autocomplete list , see 542-duplicates.png​.

But wouldn't it be a better UX if you can click on an autocomplete item and it redirects you to the search result directly? The search doesn't support multiple names at once, so the next action is clicking on the Search button. In this case array_unique() would be wrong, it should probably display the type too like "get_terms (Function)" and "get_terms (Filter Hook)".

[keesiemeijer]

If there is a single result or if you put () as the last part of a search query and there is a full match the search gets redirected to the single post page automatically. I'm all for submitting the search form after clicking an autocomplete item.

To put the type (in text) after all autocomplete items might get a bit busy though. Maybe only for duplicate results? You can narrow the autocomplete items down by using the search filters.

[keesiemeijer]

Thinking about it more we should just use array_unique. Clicking a filter or function with the same (duplicate) name will result in the same search results for both. The search results are displayed with the type identifier. Autocomplete should help you find what exists depending on the search filters. We could show what search filters are used at the top of the autocomplete item list to make it more clear where you're searching in.

An alternate option for submitting the form after you click an item could be to add focus (and the cursor) back to the search form so you can refine the search query before submitting.

[keesiemeijer]

Remove duplicate autocomplete items and add focus back to searchfield after clicking autocomplete item

[coffee2code]

In 2780:

developer.wordpress.org: Remove duplicate autocomplete items and add focus back to searchfield after clicking autocomplete item.

Props keesiemeijer.
Fixes #542.