Search jQuery

jQuery Forum

Screen name:
fractal5

fractal5's Profile

1 Posts

5 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Autocomplete widget - not triggering onchange
[10Replies]
- 08-Feb-2013 11:59 AM
- Forum: Using jQuery UI
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>
11. <link rel="stylesheet" type="text/css" href="new.css">
12. <script src="new.js"></script>
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>
24. </head>
25. <body>
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>
35. <button id="toggle">Show underlying select</button>
37. <input type='text' id='model' />
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 );
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. });
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. }
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" );
79. input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
80. return $( "<li>" )
81. .append( "<a>" + item.label + "</a>" )
82. .appendTo( ul );
83. };
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();
104. // close if already visible
105. if ( wasOpen ) {
106. return;
107. }
109. // pass empty string as value to search for, displaying all results
110. input.autocomplete( "search", "" );
111. });
113. input.tooltip({
114. tooltipClass: "ui-state-highlight"
115. });
116. },
118. _destroy: function() {
119. this.wrapper.remove();
120. this.element.show();
121. }
122. });
123. })( jQuery );
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

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend