alphalife Posted August 27, 2012 Share Posted August 27, 2012 So im using the premade code from JQuery UI. Wanted to know how i would be able to check the form field <input type="hidden" name="auto" value="1"> to auto submit the form using Jquery combo box. <script type="text/javascript" > (function( $ ) { $.widget( "ui.combobox", { _create: function() { var auto = document.getElementById('auto'); var input, self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : "", wrapper = this.wrapper = $( "<span>" ) .addClass( "ui-combobox" ) .insertAfter( select ); input = $( "<input>" ) .appendTo( wrapper ) .val( value ) .addClass( "ui-state-default ui-combobox-input" ) .autocomplete({ delay: 0, minLength: 0, source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( select.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&;]+(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+", "gi" ), "<strong>$1</strong>" ), value: text, option: this }; }) ); }, select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); // This is where i found out how to autosubmit the form, but sometimes i wont need to use the Auto input field, because the select combo box comes before another form field. //this.form.submit(); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( $( this ).text().match( matcher ) ) { this.selected = valid = true; return false; } }); if ( !valid ) { // remove invalid value, as it didn't match anything $( this ).val( "" ); select.val( "" ); input.data( "autocomplete" ).term = ""; return false; } } } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .appendTo( wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-combobox-toggle" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { input.autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); }); }, destroy: function() { this.wrapper.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script> Quote Link to comment https://forums.phpfreaks.com/topic/267655-jquery-ui-combobox/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.