Bug 34113

Summary: Replace the use of jQueryUI autocomplete
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: NEW --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: dcook, jonathan.druart, stephanie.leary, testopia
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on:    
Bug Blocks: 29222    

Description Owen Leonard 2023-06-23 14:36:06 UTC
As discussed in Bug 29222, jQueryUI autocomplete should be replaced. The last time I checked it was used in these places:

  - Checkout and patron header searches
  - Article request patron search
  - Course reserve instructor search
  - Holds patron search
  - UNIMARC 210c plugin
  - UNIMARC 225a plugin

Possible replacement candidate: https://tarekraafat.github.io/autoComplete.js/.
Comment 2 Jonathan Druart 2023-07-05 06:51:32 UTC
There is also https://iqbalfn.github.io/bootstrap-autocomplete/
Comment 3 Stephanie Leary 2024-08-11 17:53:36 UTC
The Bootstrap autocomplete components are generally not accessible. In accessibility circles, the Alphagov Autocomplete component (developed for the UK.gov design system) is considered the best.
https://alphagov.github.io/accessible-autocomplete/examples/

Adam Silver, who worked on that design system, has a variation on it that supports aliases (see the Demo link at the end):
https://adamsilver.io/blog/building-an-accessible-autocomplete-control/

These are the only two autocomplete components I've ever heard screen reader users describe as a good user experience. Both can be styled with Bootstrap classes.
Comment 4 David Cook 2024-11-25 22:18:55 UTC
Cheers, Stephanie.

I'm planning on replacing jQueryUI on another project of mine soon, so I'll take a look at the Alphagov Autocomplete for that too.
Comment 5 David Cook 2024-12-04 01:09:05 UTC
On a non-Koha project, I just replaced a jQueryUI autocomplete with the Alphagov "accessible-autocomplete", and it went pretty well. 

The parameters are very similar, and it's pretty easy to style. I like its default styling as well. 

That said, there is 1 major difference. 

Instead of binding to an input element, you bind it to a container element and it dynamically creates the input element. Dealing with this difference is probably where most of the work would be, especially for cases where we're using Template::Toolkit to put a value into the "value" attribute for the input. We'll have to do something like put it in a hidden field and then pass it as default value or something using Javascript (which is part of the accessible-autocomplete API).

--

The Alphagov folk say that they don't support the autocomplete, but they actively maintain it, and it has current releases.
Comment 6 David Cook 2024-12-04 02:08:54 UTC
One problem with "accessible-autocomplete" is that the "source" has to return a list of strings, while jQueryUI can handle a list of strings, or an "array of objects with label and value properties".

That said, we can implement this functionality on our own. It's something to be aware of though...