Databases
StackOverflow2013
Postsdbo
POjQuery Combobox with codebehind "Source:" values
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Combobox with codebehind "Source:" values
    text
    copied!<p>I've been at this for 12+ exhausting hours trying get it to work on my page. Below I will include my codebehind (list source &amp; getter), my jQuery (in the header wrapped in the "ready" function), and my asp.net dropdownlist control, button, and input objects wrapped in a div. Here is the <a href="http://jqueryui.com/demos/autocomplete/#combobox" rel="nofollow">combobox</a> I'm trying to implement. Nothing I have found yet has helped. It seems it's an issue with linking actions and values together. <strong>Namely, the button does not toggle the dropdownlist to expand</strong>.</p> <p><strong>To make it easier</strong>, I've made all caps comments in the codeboxes to point out specifically where I need help. There are only two things left to troubleshoot. Thanks maties :-)></p> <p>Now onto the codebehind --- (NOT THE MAIN ISSUE)</p> <pre><code>Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load combobox.DataSource = car_list combobox.DataBind() End Sub Protected car_list As New ArrayList({ "Audi", "Lexus", "BMW", "Ford", "Chevrolet", "Jeep", "Jaguar", "Toyota", "Nissan", "Honda", "Subaru", "Hyundai", "Tesla", "Mercedez", "Ferrari" }) //'This function returns the above list as either a String list, or wrapped in a tag Function getList(ByVal listName As ArrayList, Optional ByVal tagWrapper As String = "", Optional ByVal tagId As String = "") As String Dim items As String = "No items in list." If Not tagWrapper = "" Then //'Return as HTML Tagged Objects, a.k.a. Elements or DOM Objects or Nodes For Each item In listName If Not tagId = "" Then items = "&lt;" + tagWrapper + " id=""" + tagId + """" + "&gt;" //'Used if "id" parameter passed in items += item.ToString items += "&lt;/" + tagWrapper + "&gt;" &amp; vbCrLf Else items = "&lt;" + tagWrapper + "&gt;" items += item.ToString items += "&lt;/" + tagWrapper + "&gt;" &amp; vbCrLf End If Next Else //'Return as String Array, e.g. ["item1", "item2", "item3"] For Each item In listName Dim isFirstItem As Boolean = True If isFirstItem Then //'Treat the first item differently isFirstItem = Not isFirstItem items = item.ToString Else items += ", " + item.ToString End If Next End If Return items End Function </code></pre> <p>The jQuery (again, in the header) - (<strong>HERE BE DRAGONS!</strong>)</p> <pre><code>$(document).ready(function () { $("#autocomplete").autocomplete({ delay: 0, minLength: 0, autoFocus: true, //This "source:" function is pulled from the jQuery Combobox link above. source: function (request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response($("#combobox").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" //SOMETHING WRONG WITH THE REGEX REPLACE... THE "strong" TAGS ARE COMING THROUGH IN THE DROPDOWN :p ), "&lt;strong&gt;$1&lt;/strong&gt;"), value: text, option: this }; })); } //END "source:" }); //END ".autocomplete" $("#combobox").combobox(); //THIS IS WHERE IT'S AT!! //THE DROPDOWNLIST CONTROL SHOULD BE HIDDEN, BUT THIS BUTTON SHOULD TOGGLE ITS CONTENTS INTO VIEW //Here is the code used in the "combobox" demo provided on the jQuery UI site, but for some reason // it doesn't work with mine. The key difference to note is that they created all their DOM // elements and attached the listeners etc. using the "(function ($) { });" form. $("#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(); }); }); </code></pre> <p>And finally the markup (using the id as the handle)</p> <pre><code>&lt;form action="#" method="post"&gt; &lt;h2&gt;Choose your favorite car&lt;/h2&gt; &lt;hr /&gt; &lt;div class="ui-widget"&gt; &lt;!-- Autocomplete Combobox --&gt; &lt;asp:DropDownList ID="combobox" runat="server" ClientIDMode="Static"&gt;&lt;/asp:DropDownList&gt;&lt;br /&gt; &lt;input id="autocomplete" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" style="margin-right:0;" /&gt; &lt;button id="toggle" type="button" tabindex="-1" title="Show All Items" class="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 -7px;"&gt; &lt;span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt;&lt;span class="ui-button-text" style="padding:0;"&gt;&amp;nbsp;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>To make it a little more clear, both the button and input objects inside of the combobox ui-widget div should link to the asp.net control. I'm not hard set on the control, but I've tried it both ways and have been unsuccessful.</p> <p><strong>EDIT</strong>: WOOHOOOO!! I made the following change and got the datasource working. Now I just have to fix the button to make it toggle the view of the dropdownlist.</p> <pre><code>//In the jQuery "source" section I replaced response(select.children("option").map(function () //with response($("#combobox").children("option").map(function () </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