I am using jquery UI combobox autocomplete and the issue is that when i select an option from the combo box and then i edit that value(or even if set it to empty) still during form submission, the value at the time of edition is appearing. For example, in the combobox, say the value is 'abc123' and if i edit it to say 'abc' or set it to empty, during form submission, still the value 'abc123' is going. Can any one suggest how i can capture the value that is entered in the combobox(in this case edited value abc)? Below is my code.

2.  (function( $ ) {
3. $.widget( "ui.combobox", {
4. _create: function() {
5. var self = this;
6. var select = this.element.hide(),
7. selected = select.children( ":selected" ),
8. value = selected.val() ? selected.text() : "";
9. var input = $( "<input>" )
10. .insertAfter( select )
11. .val( value )
12. .autocomplete({
13. delay: 0,
14. minLength: 0,
15. source: function( request, response ) {
16. var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
17. response( select.children( "option" ).map(function() {
18. var text = $( this ).text();
19. if ( this.value && ( !request.term || matcher.test(text) ) )
20. return {
21. label: text.replace(
22. new RegExp(
23. "(?![^&;]+;)(?!<[^<>]*)(" +
24. $.ui.autocomplete.escapeRegex(request.term) +
25. ")(?![^<>]*>)(?![^&;]+;)", "gi"
26. ), "<strong>$1</strong>" ),
27. value: text,
28. option: this
29. };
30. }) );
31. },
32. select: function( event, ui ) {
33. ui.item.option.selected = true;
34. //select.val( ui.item.option.value );
35. self._trigger( "selected", event, {
36. item: ui.item.option
37. });
38.                                                         self.element.trigger('change');
39. },
40. change: function( event, ui ) {
41. if ( !ui.item ) {
42. var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
43. valid = false;
44. select.children( "option" ).each(function() {
45. if ( this.value.match( matcher ) ) {
46. this.selected = valid = true;
47. return false;
48. }
49. });
50. if ( !valid ) {
51. // remove invalid value, as it didn't match anything
52. $( this ).val( "" );
53. select.val( "" );
54. return false;
55. }
56. }
57. }
58. })
59. .addClass( "ui-widget ui-widget-content ui-corner-left" );
60. 
    
61. input.data( "autocomplete" )._renderItem = function( ul, item ) {
62. return $( "<li></li>" )
63. .data( "item.autocomplete", item )
64. .append( "<a>" + item.label + "</a>" )
65. .appendTo( ul );
66. };
67. 
    
68. $( "<button type=button>&nbsp;</button>" )
69. .attr( "tabIndex", -1 )
70. .attr( "title", "Show All Items" )
71. .insertAfter( input )
72. .button({
73. icons: {
74. primary: "ui-icon-triangle-1-s"
75. },
76. text: false
77. })
78. .removeClass( "ui-corner-all" )
79. .addClass( "ui-corner-right ui-button-icon" )
80. .click(function() {
81. // close if already visible
82. if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
83. input.autocomplete( "close" );
84. return;
85. }
86. 
    
87. // pass empty string as value to search for, displaying all results
88. input.autocomplete( "search", "" );
89. input.focus();
90. });
91. }
92. });
93. })(jQuery);
94. 
    
95.             
96. $(function() {
97. $("#combobox").combobox();
98. });