Autocomplete widget - not triggering onchange

Autocomplete widget - not triggering onchange

Hi,

First of all, I apologize if I've posted this in the wrong forum. If so, could a moderator please move it.

Now to my dilemma. I am trying to develop a textbox and a dropdown, where the value of the textbox is dependent on the option selected from the dropdown.

For the dropdown I wanted to use the autocomplete feature and found a widget that does it (from here:  Link)
For the textbox dependency I am using Javascript.

The problem I face is that when using the autocomplete widget, on selecting an option, it is not triggering an onchange event in the select (dropdown). And I need this onchange event for my textbox to be filled in.

There is also a button on the page, which lets you the original select box.

I have put the code for my page below. I'm also using some CSS which I have added at the end.

HTML part:
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>jQuery UI Autocomplete - Combobox</title>
  6.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  7.   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  8.   <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

  10.   
  11.   <link rel="stylesheet" type="text/css" href="new.css">
  12.   <script src="new.js"></script>
  13.   
  14. <SCRIPT type='text/javascript' >
  15.   //this function determines how changing the value of the dropdown will affect the content of the textboxes
  16. function DeviceInfo() {
  17.  var sel = document.getElementById("combobox").selectedIndex; //gets the index of the select
  18.  document.getElementById("model").value = document.getElementById("combobox").selectedIndex; //displays the index of the select in the textbox
  19. }
  20. </script>
  21.   
  22.   
  23.   
  24. </head>
  25. <body>
  26.  
  27.   <label>Your preferred programming language: </label>
  28.   <select id="combobox" onchange='DeviceInfo()'>
  29.     <option value="">Select one...</option>
  30.     <option value="Asp">Asp</option>
  31.     <option value="BASIC">BASIC</option>
  32.     <option value="C++">C++</option>
  33.   </select>
  34.  
  35. <button id="toggle">Show underlying select</button>

  37. <input type='text' id='model' />
  38.  
  39.  
  40. </body>
  41. </html>

JQuery part (new.js)
  2. (function( $ ) {
  3.     $.widget( "ui.combobox", {
  4.       _create: function() {
  5.         var input,
  6.           that = this,
  7.           wasOpen = false,
  8.           select = this.element.hide(),
  9.           selected = select.children( ":selected" ),
  10.           value = selected.val() ? selected.text() : "",
  11.           wrapper = this.wrapper = $( "<span>" )
  12.             .addClass( "ui-combobox" )
  13.             .insertAfter( select );
  14.  
  15.         function removeIfInvalid( element ) {
  16.           var value = $( element ).val(),
  17.             matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
  18.             valid = false;
  19.           select.children( "option" ).each(function() {
  20.             if ( $( this ).text().match( matcher ) ) {
  21.               this.selected = valid = true;
  22.               return false;
  23.             }
  24.           });
  25.  
  26.           if ( !valid ) {
  27.             // remove invalid value, as it didn't match anything
  28.             $( element )
  29.               .val( "" )
  30.               .attr( "title", value + " didn't match any item" )
  31.               .tooltip( "open" );
  32.             select.val( "" );
  33.             setTimeout(function() {
  34.               input.tooltip( "close" ).attr( "title", "" );
  35.             }, 2500 );
  36.             input.data( "ui-autocomplete" ).term = "";
  37.           }
  38.         }
  39.  
  40.         input = $( "<input>" )
  41.           .appendTo( wrapper )
  42.           .val( value )
  43.           .attr( "title", "" )
  44.           .addClass( "ui-state-default ui-combobox-input" )
  45.           .autocomplete({
  46.             delay: 0,
  47.             minLength: 0,
  48.             source: function( request, response ) {
  49.               var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  50.               response( select.children( "option" ).map(function() {
  51.                 var text = $( this ).text();
  52.                 if ( this.value && ( !request.term || matcher.test(text) ) )
  53.                   return {
  54.                     label: text.replace(
  55.                       new RegExp(
  56.                         "(?![^&;]+;)(?!<[^<>]*)(" +
  57.                         $.ui.autocomplete.escapeRegex(request.term) +
  58.                         ")(?![^<>]*>)(?![^&;]+;)", "gi"
  59.                       ), "<strong>$1</strong>" ),
  60.                     value: text,
  61.                     option: this
  62.                   };
  63.               }) );
  64.             },
  65.             select: function( event, ui ) {
  66.               ui.item.option.selected = true;
  67.               that._trigger( "selected", event, {
  68.                 item: ui.item.option
  69.               });
  70.             },
  71.             change: function( event, ui ) {
  72.               if ( !ui.item ) {
  73.                 removeIfInvalid( this );
  74.               }
  75.             }
  76.           })
  77.           .addClass( "ui-widget ui-widget-content ui-corner-left" );
  78.  
  79.         input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  80.           return $( "<li>" )
  81.             .append( "<a>" + item.label + "</a>" )
  82.             .appendTo( ul );
  83.         };
  84.  
  85.         $( "<a>" )
  86.           .attr( "tabIndex", -1 )
  87.           .attr( "title", "Show All Items" )
  88.           .tooltip()
  89.           .appendTo( wrapper )
  90.           .button({
  91.             icons: {
  92.               primary: "ui-icon-triangle-1-s"
  93.             },
  94.             text: false
  95.           })
  96.           .removeClass( "ui-corner-all" )
  97.           .addClass( "ui-corner-right ui-combobox-toggle" )
  98.           .mousedown(function() {
  99.             wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  100.           })
  101.           .click(function() {
  102.             input.focus();
  103.  
  104.             // close if already visible
  105.             if ( wasOpen ) {
  106.               return;
  107.             }
  108.  
  109.             // pass empty string as value to search for, displaying all results
  110.             input.autocomplete( "search", "" );
  111.           });
  112.  
  113.         input.tooltip({
  114.           tooltipClass: "ui-state-highlight"
  115.         });
  116.       },
  117.  
  118.       _destroy: function() {
  119.         this.wrapper.remove();
  120.         this.element.show();
  121.       }
  122.     });
  123.   })( jQuery );
  124.  
  125.   $(function() {
  126.     $( "#combobox" ).combobox();
  127.     $( "#toggle" ).click(function() {
  128.       $( "#combobox" ).toggle();
  129.     });
  130.   });
CSS part (new.css)
  2. .ui-combobox {
  3.     position: relative;
  4.     display: inline-block;
  5.   }
  6.   .ui-combobox-toggle {
  7.     position: absolute;
  8.     top: 0;
  9.     bottom: 0;
  10.     margin-left: -1px;
  11.     padding: 0;
  12.     /* support: IE7 */
  13.     *height: 1.7em;
  14.     *top: 0.1em;
  15.   }
  16.   .ui-combobox-input {
  17.     margin: 0;
  18.     padding: 0.3em;
  19.   }
I hope I have been able to explain this properly. Could someone please help me figure out how to trigger the onchange event? And if can't be done, is there another way to do what I want?


Thanks,
fractal5