Question

I’m using a ColdFusion autosuggest for my UserID field. When a user starts to type in a UserID, a list of user ids and the user names associated with it pop up (populated by a cfc function). Sample code:

<cfinput name="userID" type="text" value="#userID#" autoSuggest="cfc:Utilities.suggestUser({cfautosuggestvalue})" matchcontains="true" />

The suggestions are listed in the format “User Name <userID>“. So if the user would start typing 123, a sample suggestion that would pop up would be “Harvey Mann <1234>”.

The problem is that if the user chooses that suggestion, I don’t want to insert the whole suggested text into the input field – I just want to insert the user id (“1234” in this case). I would also like to be able to insert the user name (“Harvey Mann”) into an adjacent field/area if possible. Is there any way to accomplish this?

Answer 1

Since you are using CF’s built-in implementation of autosuggest, you are stuck with only having access to one returned value. Thus if the value consists of mutliple ‘parts’ and you want to insert different ‘parts’ of the value into different columns, you will have to parse the value and extract appropriate parts from the string. In your example case you could treat the value as a list delimited by <. In this case you can get the name ‘part’ with

trim(listfirst(form.userID, "<"))

and the id ‘part’ with

replace(listlast(form.userID, "<"), ">", "")

Alternatively, you can always use jQuery UI Autocomplete implementation – you’ll have to write your own javascript for it, but it gives you far more control than the built-in cf’s implementation. Check jQuery UI docs for more info: http://jqueryui.com/demos/autocomplete/

UPDATE:
On second thought, if you just want to display selected value’s ‘name’ part in another area on the same page, you may be able to do it using just CF’s built-in autosuggest and a bit of javascript. Try adding this code to the HEAD section of your page:

<cfajaxproxy bind="javaScript:showName({userID})">
<script type="text/javascript">
showName = function(strUserId) {
 document.getElementById("someID").innerHTML = strUserId.split('<')[0];
}
</script>