Complex data in an auto-suggest
This is a question I get about once a month. Is it possible to use an autosuggest that returns complex data? What I mean is - I want to be able to start typing into a text field, see a list of matching names come up, but when I pick one, I need to know both the name value and the ID related to the name. So for example, imagine this data:
| ID | Name |
|---|---|
| 1 | Paris Hilton |
| 2 | Darth Vader |
| 3 | Victor Newman |
If I type "v" and see Victor Newman pop up, when I select him I need to know that his ID was 3.
As far as I know this isn't possible with both Spry and ColdFusion 8's autosuggest. Both demand you return simple values to populate the suggestions.
You could do a lookup based on the name. So once you get the name, do another Ajax request to translate "Victor Newman" to 3. You can probably guess the problem with this. If there are two Victor Newmans, than what ID would you return? You could return names along with a middle initial, but that simply reduces the problem. It doesn't fix it. Depending on how complex you want to get though - you could do your Ajax request and when you see more than one result returned, prompt the user to pick the one they meant.
Has anyone else solved this problem? I'm thinking there has to be a better solution.
Comments
Granted, the secondary lookup of the selected label is clunky, but it does seem like a valid workaround.
function afterSelect() {
// alert the value of the selected element
alert(document.getElementById(this.id).value));
}
The above has not been tested but it should give you an idea on how to implement.
This is how it would work:
<input type="text" name="lookup" id="lookup"><br />
<cfselect name="userID" id="userID"
bind="url:/index.cfm?
event=user.lookup={lookup@keyup}"
display="userName"
value="userID"
bindOnLoad="false" />
As the user types in the lookup field, it fires off a request to the server which returns a json-ed query to the select which puts the IDs and names in the right place. User then picks the correct user name and when submitting the form returns the ID.
Is autosuggest old enough to have a traditional version?! Haha.
I routinely use this and then use jQuery to populate a hidden field with the user ID.
Is there anything jQuery can't do? ;)
<div id="autosuggest">
<span id="SupplierName"><input type="text" name="SupplierName" id="SupplierName" /></span>
<div id="SupplierMenu" spry:region="dsSuppliers">
<table>
<tr>
<th>Supplier ID</th>
<th>Supplier Name</th>
</tr>
<tr spry:repeat="dsSuppliers" spry:suggest="{SUPPLIERID}|{SUPPLIERNAME}">
<td>{SUPPLIERID}</td>
<td>{SUPPLIERNAME}</td>
</tr>
</table>
</div>
</div>
Tweak the Spry.Widget.AutoSuggest.prototype.setValue function in SpryAutoSuggest.js file (Spry 1.6.1 line 178)to break the string into an array of strings and populate the form:
Spry.Widget.AutoSuggest.prototype.setValue = function(str)
{
if (!this.textElement)
return;
this.textElement.value = str;
var myArray = str.split(/\|/);
document.form.SupplierID.value=myArray[0];
this.textElement.value=myArray[1];
this.showSuggestions(false);
};