Any Word Match Typeahead
What car are you looking for?
Try typing something like "9", "M" or "For" in to this box see what matches it brings back
- Aston Martin DB8 Vantage
- Audi A4
- Ferrari Testarossa
- Fiat Forentino
- Ford Mondeo GT
- Ford Mustang
- Mercedes SLK 300
- Peugeot 306
- Porsche 911
- Porsche 911 Carrera
- Saab 900
- Saab 9000
- Seat Ibiza
About This Demo
This form shows a simple and effective way to allow users to select a document from a view — using type-ahead - — where the string the user enters matches distinct parts of the document's "title".
How does it work?
It's all quite simple! The Ajax lookup is performed on a view called Demos.Suggest.Cars.Multi. The first column in this view has the formula:
Name:@Explode(Name; " ")
It also has the column property "Show multiple values as separate entries" turned on. So, if the value of the "Name" field was "Ford Mustang" you would see three entries in the view. The value displayed in the first column would be either "Ford", "Mustang" or "Ford Mustang". You can then "search" for the document itself using the &StartKey= URL paramter and any of the "words" that make up its name.
You could use the same trick of adding a list to the first sorted column of a view to make other selections a much more user-friendly experience.
Let's say you have a name picker. Would you expect the user to know whether to start typing the person's first name or their surname? Why not let them be able to start typing either!? All you'd have to do is make the first column's formula something like this:
(FirstName + " " + Surname):(Surname + ", " + FirstName)
Then you could look for Jake Howlett by typing in either "Jak" or "How"
You could take it even further by adding other keys to the column, such as nick name, maiden name and/or email address:
(FirstName + " " + Surname) : (Surname + ", " + FirstName) : EmailAddress : MaidenName : NickName
Note: It's normally the second column that is displayed in the "drop-down" to the user. This column is the same for each document - no matter what the first column shows for it.