Databases
StackOverflow2013
Postsdbo
POjQuery combobox multiple instances
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery combobox multiple instances
    text
    copied!<p>I'm using <a href="http://jqueryui.com/autocomplete/#combobox" rel="nofollow">combobox</a> for two "select" dropdowns on my site. </p> <p>I need to check to see which of the comboboxes the user has clicked. </p> <p>The selects are like this:</p> <pre><code>&lt;select name="select1" id="combobox"/&gt; &lt;select name="select2" id="combobox"/&gt; </code></pre> <p>If the user cannot find the value in the drop down, the value is added to the database on form submit. I got the php side of this down. I just need to change a value of form element, when the combobox can't match it. I've got this working for 1 select, bet I cant distinguish which combobox the user has typed in.</p> <p>The jquery code is like this:</p> <pre><code> (function( $ ) { $.widget( "ui.combobox", { _create: function() { var input, that = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : "", wrapper = this.wrapper = $( "&lt;span&gt;" ) .addClass( "ui-combobox" ) .insertAfter( select ); function removeIfInvalid(element) { var value = $( element ).val(), matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "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 $( element ) // .val( "" ) .attr( "title", value + " will be added as new." ) .tooltip( "open" ); //select.val( "" ); //add new site $('#new_site_added').val(value); alert(ui.item.option); setTimeout(function() { input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); //input.data( "autocomplete" ).term = ""; return false; } } input = $( "&lt;input&gt;" ) .appendTo( wrapper ) .val( value ) .attr( "title", "" ) .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 &amp;&amp; ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi" ), "&lt;strong&gt;$1&lt;/strong&gt;" ), value: text, option: this }; }) ); }, select: function( event, ui ) { ui.item.option.selected = true; that._trigger( "selected", event, { item: ui.item.option }); $('#hidden_element_on_page').val("0"); // this is where i would like to check which combobox is selected. }, change: function( event, ui ) { if ( !ui.item ) return removeIfInvalid( this ); } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "&lt;li&gt;" ) .data( "item.autocomplete", item ) .append( "&lt;a&gt;" + item.label + "&lt;/a&gt;" ) .appendTo( ul ); }; $( "&lt;a&gt;" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .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" ); removeIfInvalid( input ); 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(); }); input .tooltip({ position: { of: this.button }, tooltipClass: "ui-state-highlight" }); }, destroy: function() { this.wrapper.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery ); $(function() { $( "#combobox, #combobox2" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox, #combobox2" ).toggle(); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload