jQuery autocomplete

I have an autocomplete text box that needs to respond to 2 events:

When the user is done typing something in the text box (I'm currently using focusout to assume when the user is done typing. So, if a user tabs out of a text box, it means the user is done typing.)
When the user selects an item in the autocomplete list of values (I'm using autocomplete's select event to determine that)

The Problem:

When the user selects an item in the autocomplete list of values, the chain of event is such that focusout is called first, then the select. When in focusout, I only have access to what the user typed, not what the user selected om the autocomplete list of values -- and that's what I actually need. How do I solve this problem?

Steps to Reproduce the Problem:

In the text box, type the letter a
Select ActionScript from the autocomplete list of values

Observe console.debug messages:

focusout event called
a
select event called
ActionScript

Here's the code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <title>Data Matching</title>
    </head>
    <body>
        <form>
            <input id="1" type="text"></input>
            <input id="2" type="submit"></input>
        </form>

        <script type="t


                    
                    
                        
                        jquery-ui
                        
                        jquery-plugins
                        
                        jquery
                        
                        jquery-ui-autocomplete
                        
                    
                    
                        
                        
                        
                        
                        
                        Edit
                        
                        
                        
                            
                        
                        
                        Report

This is precisely why jQueryUI introduced a special change event for autocomplete:

Triggered when the field is blurred, if the value has changed; ui.item refers to the selected item.

This event can do double-duty for both of your requirements:

$("#1").autocomplete({
    /* snip */
    change: function(event, ui) {
        if (ui.item) {
            console.log("ui.item.value: " + ui.item.value);
        } else {
            console.log("ui.item.value is null");
        }
        console.log("this.value: " + this.value);
    }
});

ui.item will not be defined when the user did not select a value from the list of autocomplete candidates.
On the other hand, this.value will always be correct.

Here's an example of this: http://jsfiddle.net/33GJb/

answered 2011-09-12T01:29:00.500

1 Answer

Your Answer