title: Using Jquery Autocomplete with C#
body: <p>I am new to webdev, Jquery and asp.NET, I have tried to follow other's questions, and have been working on this problem for about a week now. I cannot seem to get it work with my database.</p>
  
  <p>I am trying to implement a simple autocomplete feature for a text box on my asp.NET webpage using Jquery, C#, and a SQL database. So far I have a  C# function "Search()" which grabs the results similar to a local string. However I currently don't know how to pass the input text to this C# function.</p>
  
  <p>Here is my .cs:</p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
  {
  
  }
  
  protected void Search(object sender, EventArgs e)
  {
      List&lt;string&gt; results;
      //ListBox1.Items.Clear();
      results = OleDb.fDbReadToArray(@"SELECT Project_Name from tProjectNames where Project_Name like '" + Local_String_to_be_passed from asp.NET + "%'");
     //foreach (string item in results)
     //{
     //    ListBox1.Items.Add(item);
     //}
  }
  </code></pre>
  
  <p>From what I've read online a good way to achieve this would to use Jquery and ajax to post the users input from the text box to my c# code and then get the results. I am trying to follow the Jquery example for autocomplete with a remote data source 
  (see <a href="https://jqueryui.com/autocomplete/#remote" rel="nofollow noreferrer">https://jqueryui.com/autocomplete/#remote</a>). </p>
  
  <p>But I am struggling to make the Jquery go to my c# function. Here is my asp.NET:</p>
  
  <p></p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  
   &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
        &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
        &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
        &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
        &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            $(function () {
                $("#ProjectNames").autocomplete({
                    source: "live_search.aspx.cs/Search()",
                    select: function (event, ui) {
                        log("Selected: " + ui.item.value + " aka " + ui.item.id);
                    }
                });
            });
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div&gt;
        &lt;label for="ProjectNames"&gt;Project Names: &lt;/label&gt;
        &lt;input id="ProjectNames" type ="text" oninput="Search()" /&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can anyone tell me how to get what the user types in the input text box go to my C# function and then post the results back to the Jquery suggestion box?</p>
  
  <p>Thank you</p>
  
  <p>EDIT:
  Here is the solution that ended up working for me, credit Chetan Ranpariya.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;script src="jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
            $(function () {
                $("#ProjectNames").autocomplete({
                    source: function (request, response) {
                        var objdata = JSON.stringify({
                            obj: {
                                query: $("#ProjectNames").val()
                            }
  
                        });
                        $.ajax({
                            url: "Live_Search1.aspx/Search",
                            data: objdata,
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function (data) { return data; },
                            success: function (data) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item,
                                        value: item
                                    }
                                }))
                            }
                        });
                    }
                });
            });
        });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form" runat="server"&gt;
           &lt;div&gt;
                &lt;asp:label for="ProjectNames" runat="server"&gt;Project Names: &lt;/asp:label&gt;
                &lt;input ID="ProjectNames" type ="text" runat="server" /&gt;
           &lt;/div&gt; 
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>.cs:</p>
  
  <pre><code>    public class Myobj
  {
      public string query { get; set; }
  }
  
  
  [System.Web.Services.WebMethod] 
  public static List&lt;string&gt; Search(Myobj obj)
  {
  
      List&lt;string&gt; projectList = new List&lt;string&gt;() { "project", "sam", "daniel" };
      List&lt;string&gt; results = new List&lt;string&gt;() { };
      foreach(string project in projectList)
      {
          if(project.Contains(obj.query))
          {
              results.Add(project);
          }
      }
      return results;
  }
  </code></pre>
  
  <p>If anybody has any edit's on how this can be improved computationally please let me know, keep in mind that project List will probably grow to be in the thousands. Thanks again Chetan Ranpariya!</p>