froadie
froadie

Reputation: 83143

Coldfusion autosuggest interfering with my jquery "change" handler?

I'm using a ColdFusion autosuggest for my UserID field. When a user starts to type in a UserID, a list of user ids pops up (populated by a cfc function). Sample code:

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

I want to fire a handler when I choose one of the values in the autosuggest, so that I can use the selected value elsewhere. JQuery code:

$('#userID').change(function(){
    var userID = $(this).val();
    $('#otherUserIDField').html(userID);
});

The problem is, when I click on an item in the autosuggest list, the change event is fired before the selected entry is injected into the form field. For example, if I'm looking for user "123456" and I start typing "123" and then see it in the autosuggest list, I click on "123456" in the autosuggest list and the change event is fired, while the value of the form field is still only "123". I have tried adding a delay ($('#otherUserIDField').delay(1000).html(userID);), but it didn't help. Is there any other event I can use? Is there any way around this?

How can I execute code only after an autosuggestion was picked?

Upvotes: 0

Views: 226

Answers (2)

Paul
Paul

Reputation: 1575

Personally I would use jQuery stand alone rather then the inbuilt ColdFusion ajax. Here is a good example of this in action with a working demo: http://jacktraynor.blogspot.com.au/2012/02/jquery-autocomplete-using-coldfusion.html

Upvotes: 1

froadie
froadie

Reputation: 83143

I ended up using the setTimeout method. As @Esailija mentioned in a comment, the delay function doesn't actually delay the html call. I couldn't use "this" with the new code as the delay causes the focus to no longer be on the textbox.

$('#userID').change(function(){
    setTimeout(function(){
            $('#otherUserIDField').html($('#userID').val());
        }, 1000);
});

Upvotes: 1

Related Questions