Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery UI Autocomplete WebService Source returning JSON
    text
    copied!<p>I have been trying for two months to get this code working, and I am close, but still confused. I want the JQuery UI Autocomplete function to call an web service which returns JSON data and display that data for selection, and on selection put the selected value into a hidden field.</p> <p>There are several issues: 1) The autocomplete function is not firing 2) The source: "/AutoSuggest.asmx/DOTFind?" line throws an invalid object exception 3) The service requires two parameters: (string prefixText, int count) - count tells it how many records to return. 4) I am not at all certain that this code will accept JSON data that comes back from the service</p> <p>Here is the code: &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %></p> <p> Untitled Page </p> <pre><code>&lt;script type="text/javascript"&gt; if ($) { $(document).ready( function() { $('h4').addClass('tmpFrameworkLoaded'); $('h4').text('jQuery successfully loaded and running!'); } ); } &lt;/script&gt; &lt;style&gt; .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } &lt;/style&gt; &lt;div id="divDOTJQuery" runat="server"&gt; &lt;script type="text/javascript"&gt; $(function() { function log(message) { alert(message); $("&lt;div/").text(message).prependTo("#log"); $("#log").attr("scrollTop", 0); } }); $("#dotmatch").autocomplete({ source: "/AutoSuggest.asmx/DOTFind?", minLength: 2, select: function(event, ui) { log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); } }); &lt;/script&gt; &lt;div class="ui-widget"&gt; DOT Job Title or #: &lt;input type="text" id="dotmatch" /&gt; &lt;input type="hidden" id="DOTNumber" name="DOTNumber" /&gt; &lt;/div&gt; &lt;div class="ui-widget" style="margin-top: 2em; font-family: Arial"&gt; Results:&lt;br /&gt; &lt;div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p> </p> <p>and here is the web service:</p> <pre><code>[WebMethod(BufferResponse = true, Description = "Lookup a DOT record using part of DOT Number or DOT Title")] [ScriptMethod(ResponseFormat=ResponseFormat.Json)] public string DOTFind(string prefixText, int count) { if (count == 0) { count = 10; } DOT D = new DOT(); DataView DV = D.View(prefixText, count); List&lt;DOT&gt; items = new List&lt;DOT&gt;(); foreach (DataRow DR in DV.Table.Rows) { items.Add(new DOT(SQL.ColumnToString(DR, "DOTNumber").Trim(),SQL.ColumnToString(DR, "JobTitle").Trim())); } DataContractJsonSerializer serializer = new DataContractJsonSerializer(items.GetType()); MemoryStream ms = new MemoryStream(); serializer.WriteObject(ms, items); string jsonString = Encoding.Default.GetString(ms.ToArray()); ms.Close(); return jsonString; } </code></pre> <p>I would deeply appreciate any help with this that you can offer.</p> <p>Thanks,</p> <p>Bob</p>
 

Querying!

 
Guidance

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