The easiest way to add jQueryUI is to include a reference in our layout:
node-autocomplete and other necessary libraries can be added to package.json. Note: I’m required to use older verions of some packages because Heroku does not support the latest version of Express.
The dataset for this example is going to be airports and their codes. I wanted to be able to intelligently handle for the case where the user enters either the airport code or the name since most travel sites operate this way.
We need to keep lookups in memory to present the user with the properly capitalized airport name. During the actual autocomplete search, we will only use lowercased entries and input. Therefore, we need to keep track of three things:
The actual autocomplete object where we load both codes and names into
One lookup to retrieve the full name from the code
Another lookup to retrieve the full name from a lowercased airport name
["RBR - Rio Branco, AC, Brazil","RCU - Rio Cuarto, CD, Argentina","GIG - Rio De Janeiro, RJ, Brazil","RGL - Rio Gallegos, Argentina - Internacional","RIG - Rio Grande, RS, Brazil","RGA - Rio Grande, TF, Argentina","ROY - Rio Mayo, CB, Argentina","RVD - Rio Verde, GO, Brazil","RCH - Riohacha, Colombia"]
The last part is to wire up the actual jQuery UI autocomplete. I’ve also added a handler on the open to highlight the term from the search.