WordPress.org

Making WordPress.org

Opened 5 years ago

Closed 4 years ago

#542 closed enhancement (fixed)

Add Autocomplete to search

Reported by: Horttcore Owned by: coffee2code
Milestone: Priority: normal
Component: Developer Hub Keywords: has-patch has-screenshots needs-testing
Cc:

Description

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.

Attachments (6)

autocomplete.diff (4.5 KB) - added by nicole@… 5 years ago.
Add autocomplete using jquery ui autocomplete
542.1.patch (24.1 KB) - added by keesiemeijer 4 years ago.
Autocomplete using the Awesomplete widget from Lea Verou
screenshot-autocomplete.jpg (278.4 KB) - added by keesiemeijer 4 years ago.
autocomplete
542.2.patch (25.1 KB) - added by keesiemeijer 4 years ago.
Add partial matches for autocomplete list
542-duplicates.png (28.4 KB) - added by ocean90 4 years ago.
542.3.patch (7.9 KB) - added by keesiemeijer 4 years ago.
Remove duplicate autocomplete items and add focus back to searchfield after clicking autocomplete item

Download all attachments as: .zip

Change History (20)

#1 @siobhan
5 years ago

  • Owner set to nicole@…
  • Status changed from new to assigned

@nicole@…
5 years ago

Add autocomplete using jquery ui autocomplete

#2 @nicole@…
5 years ago

  • Keywords has-patch added; 2nd-opinion dev-feedback removed

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.


5 years ago

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.


5 years ago

@keesiemeijer
4 years ago

Autocomplete using the Awesomplete widget from Lea Verou

@keesiemeijer
4 years ago

autocomplete

#5 @keesiemeijer
4 years ago

  • Keywords has-screenshots needs-testing added

#6 @keesiemeijer
4 years ago

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.

Last edited 4 years ago by keesiemeijer (previous) (diff)

@keesiemeijer
4 years ago

Add partial matches for autocomplete list

#7 @keesiemeijer
4 years ago

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

Last edited 4 years ago by keesiemeijer (previous) (diff)

#8 @keesiemeijer
4 years ago

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

#9 @coffee2code
4 years ago

  • Owner changed from nicole@… to coffee2code
  • Status changed from assigned to accepted

#10 @coffee2code
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 2359:

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

Props keesiemeijer.
Fixes #542.

#11 @ocean90
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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)".

#12 @keesiemeijer
4 years ago

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.

Last edited 4 years ago by keesiemeijer (previous) (diff)

#13 @keesiemeijer
4 years ago

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
4 years ago

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

#14 @coffee2code
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 2780:

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

Props keesiemeijer.
Fixes #542.

Note: See TracTickets for help on using tickets.