Interference of AJAX search with input field auto-complete

[armandsdz]

In WordPress 4.6 new feature was introduced in "Add Plugin" page - user input in "Search Plugin" field triggers AJAX search. That's great but it also makes browser's auto-complete of this field to disappear (at least in Chrome).
Therefore it's difficult to select an already existing option of plugin name that browser's auto-complete offers because AJAX search gets triggered very soon after you type a letter in input field.
So, in most cases I need to type full name of the plugin or try to select auto-complete option before AJAX gets triggered.

I'm not sure what the solution for this would be but I don't think it's difficult to press Enter or tap Search button after you have written everything you wanted without system interfering with the process without user wanting it.
In addition, the fact that button Search disappeared some time ago made it impossible to add a plugin on touch devices. I see that AJAX search perhaps tries to fix this but it breaks auto-complete as I mention above.

[afercia]

Right, I guess this is the reason why other, similar inputs used for "live searches" have an autocomplete="off" attribute. Definitely something to have a look into.

[afercia]

Related: #31818

[adamsilverstein]

Add autocomplete="off" to the new plugin search (ajax) field

[adamsilverstein]

In 38211.diff​ I added the autocomplete="off" property we have on other ajaxified search fields. @armandsdz I'm not sure this really helps your issue because with this patch you are left without autocomplete; what it does solve is the conflicted interaction between autocomplete and ajax search. Can you review/test to see if you find this helpful?

[mklusak]

Oh yes, this feature drives me crazy! Searching for my favourite plugins became irritating experience - I start typing name of plugin, browser shows autocomplete list of older inputs, I hit down arrow to select the desired, ... aaaaand search is triggered. I would love to deactivate this awesome search feature, but can't find anything.

[afercia]

See also related: ticket:37233#comment:21

ideally it should trigger after 2 ASCII chars or one high UTF-8 char. We can standardize this for all similar cases in core, there are at least 6-7 other places.

[johnbillion]

#38516 was marked as a duplicate.

[afercia]

#39450 was marked as a duplicate.

[adamsilverstein]

38211.2.diff​

• Add autocomplete="off" to plugin list table search field which is also ajaxified

[finalwebsites]

It would help if the live-search feature would start searching after entering 3 or more characters. Or better give the user an option to enter a number of minimum chars.
The problem is not the autocomplete feature, the live-search starts to fast (after entering a single character)

[armandsdz]

Great observation!
That is probably the thing that is annoying - that everything starts to move and search as soon as you enter the first character.
In addition, when I enter, for example, "w", it starts the search and return no results.
If search would be triggered after three or so characters, user would have a chance to choose something from auto-complete list if desired. Or just finish typing what's intended.

In essence, at this point this ajax search is not fast and not unobtrusive enough to be ok that it gets triggered so early.

Replying to finalwebsites:

It would help if the live-search feature would start searching after entering 3 or more characters. Or better give the user an option to enter a number of minimum chars.
The problem is not the autocomplete feature, the live-search starts to fast (after entering a single character)

[adamsilverstein]

I agree, we should delay starting the search until the user has typed two or three letters. We do that elsewhere and we should match that logic here. I still think autocomplete should be disabled for the field because ajax search and autocomlete will still visually interfere with each other once the ajax search kicks in.

[finalwebsites]

Replying to adamsilverstein:

I still think autocomplete should be disabled for the field because ajax search and autocomlete will still visually interfere with each other once the ajax search kicks in.

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

[mklusak]

Replying to finalwebsites:

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

I agree! For me the autocomplete function on that field is much more important than the ajax search.

[adamsilverstein]

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

Do you mean until the user types 3 characters and the ajax results fire?

[adamsilverstein]

38211.3.diff​ Is an alternate approach that limits searching until you type at least 2 characters, and dynamically removes the autocomplete attribute before the ajax search kicks in. We use a similar approach in nav-menus.js.

This gives you one character to type in and see/select autocomplete results, once you hit 2 characters, the ajax search kicks in and autocomplete has been disabled for the field. You can override the threshold by setting wp.updates.searchMinCharacters after the JS loads.

@mklusak & @finalwebsites & @armandsdz can you test this out and see what you think?

• add a new variable developers can adjust, defaults to 2: wp.updates.searchMinCharacters = 2;
• leave autocomplete enabled for search field until user types searchMinCharacters - 1 (right before ajax search kicks in)
• only perform ajax search when searchMinCharacters reached. also re-search on empty field so if suer clears field results are reset

[finalwebsites]

Replying to adamsilverstein:

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

Do you mean until the user types 3 characters and the ajax results fire?

I think you can keep autocomplete anyway. The ajax result becomes visible on a complete different place. The search field doesn't have any Ajax function. That's why you need to change it.

[finalwebsites]

Replying to adamsilverstein:

38211.3.diff​ Is an alternate approach that limits searching until you type at least 2 characters, and dynamically removes the autocomplete attribute before the ajax search kicks in. We use a similar approach in nav-menus.js.

This gives you one character to type in and see/select autocomplete results, once you hit 2 characters, the ajax search kicks in and autocomplete has been disabled for the field. You can override the threshold by setting wp.updates.searchMinCharacters after the JS loads.

@mklusak & @finalwebsites & @armandsdz can you test this out and see what you think?

• add a new variable developers can adjust, defaults to 2: wp.updates.searchMinCharacters = 2;
• leave autocomplete enabled for search field until user types searchMinCharacters - 1 (right before ajax search kicks in)
• only perform ajax search when searchMinCharacters reached. also re-search on empty field so if suer clears field results are reset

I tried this patch but the live search is still searching after I entered the first character. It takes a second now before something happens. In my opinion the code is missing that limits the search for the searchMinCharacters var.

[melchoyce]

@adamsilverstein Still interested in working on this?

[adamsilverstein]

Yes, thanks for the reminder - I will take another look. I think the code is correct, so not sure why @finalwebsites said "is still searching after I entered the first character." - I'll give this another test and post a screencast to show the behavior I am seeing.

[afercia]

It would be nice to be consistent in all the "live" searches, for example trigger a search after 2 chars have been entered also in the themes search. For some recent changes there, see [42029] which fixed a small regression introduced in [41797].

[finalwebsites]

Hi,
the search experience for the plugin search is still not amazing. But I learned to live with that :)
Please check my screenshot, it shows that the search starts right after I entered the first character (not sure if the current WP version has change for this).

For a non-ajax search would work much better. The Ajax search is slow and isn't a great user experience (my opinion).

[mklusak]

I confirm @finalwebsites words ... the "one letter starts AJAX search" behavior is still there and it is really annoying. It drives me crazy! :-)

[adamsilverstein]

38211.4.diff​

• refresh against trunk
• when typing more than [min characters], then deleting some characters (eg type 3 characters then delete 1), still perform search so display is reset.
• clean up doc blocks

[karmatosed]

As beta 1 is today, going to move this to future milestone.

[SergeyBiryukov]

#49880 was marked as a duplicate.

[Mista-Flo]

The patch can still be applied to trunk, @SergeyBiryukov I would consider moving it to 5.6 milestone. FYI @audrasjb

Trac ticket:

[adamsilverstein]

38211.5.diff​ is a refresh against trunk.

[adamsilverstein]

38211.6.diff​ is a refresh against trunk

[joedolson]

For consistency, this really needs to get done. I don't see a sound reason to keep this search input different from other AJAX searches. Milestoning for 6.7. Happy to own, if you don't want to keep this @adamsilverstein

[joedolson]

Refresh patch & remove unrelated change.

[joedolson]

Minor change to string length comparison

[joedolson]

Updated patch updates the @since reference and changes the comparison logic for previousSearchStringLength to > instead of >= so that a transition from 2 characters to 1 character does not trigger the AJAX query.

Tested; works as expected:

1) No autocomplete feedback after AJAX fires.
2) Query only fires when there are two or more characters in the query, whether characters are added or removed.

Marking for commit.

[joedolson]

In 58957:

Plugins: Delay AJAX search until after 2 characters.

Prevent the AJAX search results from firing until after at least 2 characters have been typed into the search boxes. Toggle autocomplete value once AJAX is firing. Add a changeable minimum character threshold.

Props armandsdz, adamsilverstein, afercia, mklusak, finalwebsites, joedolson.
Fixes #38211.