StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's my solution which I resolved a few months ago and just now have time to post it. In the future I hope to revise this Javascript to support option groups :)</p> <p>Basically I shoved all my JS off into a separate file and called my custom function passing in the <code>DropDownList</code> and <code>TextBox</code> for each respective Combobox I wanted to create. The <code>DataSourceID</code> was supplied to the <code>DropDownList</code> using an <code>SqlDataSource</code> to populate it from my database. ASP.NET renders this as a <select> element with an <option> element for each <code>ListItem</code> in the <code>DropDownList</code>. The jQuery UI autocomplete plugin reads these <option> elements and creates a hidden <ul> with a <li> for each corresponding <option> in the <select> element. The items are found by the line <code>response($(ddl).children("option").map(function () {...</code>. Note that replacing 'children' with 'find' will return options inside of an <optgroup> tag as well.</p> <p>Following is my markup which calls the JS function, followed by the JS function itself:</p> <pre class="lang-html prettyprint-override"><code> <script type="text/javascript"> function pageLoad() { cbsetup("#TextBoxID", "#DropDownBoxID"); }); </script>  <span> <asp:DropDownList ID="DropDownBoxID" runat="server" DataSourceID="SDS" DataTextField="Name" DataValueField="ID"></asp:DropDownList> <asp:TextBox ID="TextBoxID" runat="server" CssClass="combobox ui-autocomplete-input ui-widget ui-widget-content ui-corner-left"></asp:TextBox>  <button id="ButtonID" type="button" tabindex="-1" title="Show All Items" class="toggle ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false" style="margin:0 0 0 -5px; height: 23px;"> <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span> <span class="ui-button-text" style="padding:0;">&nbsp;</span> </button> </span> </code></pre> <pre class="lang-js prettyprint-override"><code>function cbsetup(cb, ddl) { try { $(cb).unbind(); $(cb).autocomplete({ delay: 300, minLength: 0, autoFocus: true, source: function (request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response($(ddl).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" ), "$1" //"<style=\"text-weight:bold;\">$1</style>" ), value: text, option: this }; })); }, select: function (event, ui) { ui.item.option.selected = true; }, 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; } } } }); $(cb).siblings("button.toggle").click(function () { // close if already visible if ($(cb).autocomplete("widget").is(":visible")) { $(cb).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 $(cb).autocomplete("search", ""); $(cb).focus(); }); } /* TRY END */ catch (e) { jAlert(e.name + ', ' + e.message, 'JS Exception Caught'); } } </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