Getting value from autocomplete dropdown

Getting value from autocomplete dropdown

I am using jQuery UI latest version 1.8. I am using Autocomplete drop-down feature for combo box. can you any body tell me how to get selected item value?
I have to implement some feature like on select of first drop down value i want to load the 2nd drop down.
can you please let me know how to implement this in jquery?

I am new to jquery. If somebody can provide some example it will be good.I am attaching my example herewith.

  1. <head>
        <meta charset="UTF-8" />
        <title>jQuery UI Autocomplete Combobox Demo</title>
        <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="ui/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>

        <script type="text/javascript" src="ui/jquery.ui.button.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.position.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
        <link type="text/css" href="demos/demos.css" rel="stylesheet" />
        <script type="text/javascript">
        (function($) {
            $.widget("ui.combobox", {
                _create: function() {
                    var self = this;
                    var select = this.element.hide();
                    //console.log(select);   
                    var input = $("<input>")
                        .insertAfter(select)
                        .autocomplete({
                            source:'test.json',
                            delay: 0,
                            select: function(e, ui) {
                                if (!ui.item) {
                                    // remove invalid value, as it didn't match anything
                                    $(this).val("");
                                    return false;
                                }                           
                                $(this).focus();
                                //console.log(ui);
                                select.val(ui.item.id);
                                alert(select.val());
                                //console.log(select.val());
                                self._trigger("selected", null, {
                                    item: select.find("[value='" + ui.item.id + "']")
                                });                                           
                            },
                            minLength: 0
                        }).addClass("ui-widget ui-widget-content ui-corner-left");
                    $("<button>&nbsp;</button>")
                    .insertAfter(input)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    }).removeClass("ui-corner-all")
                    .addClass("ui-corner-right ui-button-icon")
                    .position({
                        my: "left center",
                        at: "right center",
                        of: input,
                        offset: "-1 0"
                    }).css("top", "")
                    .click(function() {
                        // close if already visible
                        if (input.autocomplete("widget").is(":visible")) {
                            input.autocomplete("close");
                            return;
                        }
                        // pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                        input.focus();
                    });
                }
            });

        })(jQuery);
           
        $(function() {
            $("#firstCombo").combobox();       
            //alert(("#firstCombo").val());
            $("#secondCombo").combobox();
        });
        </script>
        <style>
            /* TODO shouldn't be necessary */
            .ui-button-icon-only .ui-button-text { padding: 0.35em; }
            .ui-autocomplete-input { padding: 0.48em 0 0.47em 0.45em; }
        </style>

    </head>
    <body>
       
    <div class="demo">

    <div class="ui-widget">
        <label>1st dropdown </label>
        <select id="firstCombo"></select>   
    </div>



    <div class="ui-widget">
        <label>2nd dropdown </label>
        <select id="secondCombo">
           
        </select>
    </div>
    </body></html>





































































































Thanks.
smruti