Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This PR rips out the current autocomplete control with its two big legacy dependencies: 1. `prototype.js`[^1] (no updates since 2015) 2. `scriptalicious.js` (no updates since 2010) and replaces them with the much much smaller, modern, and actively maintained https://github.com/kraaden/autocomplete. We use denis-taran/autocomplete@589da82 which is versioned as 8.0.4 on NPM (https://www.npmjs.com/package/autocompleter/v/8.0.4). The end result replicates the functionality almost exactly. Thanks to @reedy, the CSS matches the existing color palette too! The reason for this change is that the current autocomplete framework blocks multiple other improvements. `autocomplete.php` currently returns an HTML fragment as the response which is then embedded into the DOM. Request payload: `src_ap=new` Response payload: ```html <ul class='autocomplete'><li class='autocomplete' origin='src_ap' id='NEW:9188:-90.028297424316:30.042400360107:-6:A'>New Orleans-Lakefront Airp. (NEW), United States</li> <li class='autocomplete' origin='src_ap' id='EWB:5737:-70.95690155029297:41.67610168457031:-5:A'>New Bedford Regional Airpo. (EWB), United States</li> <li class='autocomplete' origin='src_ap' id='EWN:3730:-77.04290008539999:35.0730018616:-5:A'>New Bern-Coastal Carolina. (EWN), United States</li> <li class='autocomplete' origin='src_ap' id='HVN:4006:-72.88680267:41.26369858:-5:A'>New Haven-Tweed New Haven. (HVN), United States</li> <li class='autocomplete' origin='src_ap' id='MSY:3861:-90.25800323486328:29.99340057373047:-6:A'>New Orleans-Louis Armstron. (MSY), United States</li> <li class='autocomplete' origin='src_ap' id='NBG:3768:-90.03500366:29.82530022:-6:A'>New Orleans NAS JRB/Alvin. (NBG), United States</li> </ul> ``` This is super tight coupling between the UI and the server. This UI dependency has to be removed before we can upgrade the endpoint. I use `fetch` to send the request to `autocomplete.php` but then process the response as data instead of embedding it in the DOM. I parse the response as XML using `DOM.Parser` (this part will become `JSON.parse()` once the API starts returning JSON) and pass the data to `autocomplete.js` which deals with showing the list of items. [^1]: We still need `prototype.js` in the map widget. See #1224.
- Loading branch information