AutoComplete Using JQuery for ASP.NET

Question

The ff example is from http://jqueryui.com/autocomplete/

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


</body>
</html>

from this example I want to apply it in my ASP.NET project.

My concern is, is it possible to put the content of "availableTags" to a variable from code behind? If yes then how can I connect it to this code to accomplish the same thing?

I would appreciate your help.

Thank you!

I think you will have to use a script manager or some other mechanism to insert the values for you jquery data source into the dom on you asp.net page load, assuming you are using aspx pages. If you are using mvc then it is trivial. — Ross Bush
– Ross Bush, Commented Sep 10, 2013 at 1:54
Since you're using asp.net, why not use the built in autocomplete asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/… — Yuriy Faktorovich
– Yuriy Faktorovich, Commented Sep 10, 2013 at 1:55
I tried it Yuriy but it doesn't work for me because or the complexity of the predefined class that we are using to access the database. — Chris N.P.
– Chris N.P., Commented Sep 10, 2013 at 1:59
Well, you would just need to build a comma separated list of quoted strings and just use var availableTags = [<%= MyQuotedStrings %>]; to output it directly within the array. This is basic ASP.NET. — Solomon Closson
– Solomon Closson, Commented Sep 10, 2013 at 2:02

Zruty · Accepted Answer · 2013-09-10 02:03:59Z

6

Script portion of the ASPX page:

<script>
$(function() {
  var availableTags = [
    <%= GetAvailableTags() %>
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});
</script>

Code behind:

public string GetAvaliableTags()
{
    var tags = new[] { "ActionScript", "Scheme" };
    return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x)));
}

The GetAvailableTags() function's output will be directly written to the page at render time.

This is a 'quick and dirty' solution of course. If, for example, your auto-complete items contain special characters like quotes, you'll have to take a different approach.

answered Sep 10, 2013 at 2:03

Zruty

8,7151 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris N.P. Over a year ago

Thanks I will try this. Don't worry we don't include special characters in the items. It's just a list of names from the database.

Chris N.P. Over a year ago

I just realize that yes it's really a 'quick and dirty' solution but for me it's a bit cryptic as of the moment since I haven't tried this before. :)

Karl Anderson Over a year ago

I have never used <%= %> syntax to bind a JavaScript array, nice! Filing this one away for later use!

Karl Anderson · Accepted Answer · 2013-09-10 02:13:01Z

4

You can do it with ASP.NET AJAX Page Methods as the conduit to the server-side called via jQuery to retrieve a list of availableTags, like this:

<script>
    $(document).ready(function() {
        $("#tags").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "YourPage.aspx/GetAutoComplete",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {

                    }
                });
            }
        });
    });
</script>

Now in code-behind on YourPage.aspx, create the page method, like this:

[WebMethod]
public static string[] GetAutoComplete()
{
    return new[]
    {
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    };
}

edited Sep 10, 2013 at 2:13

answered Sep 10, 2013 at 2:05

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

6 Comments

Zruty Over a year ago

Nice approach. I didn't realize you can create AJAX endpoints in ASP.NET this easily. I think your syntax is wrong though: duplicate header.

Karl Anderson Over a year ago

Ah yes, copy and paste got me. LOL. Updating answer.

Chris N.P. Over a year ago

I agree this is simpler approach compared to the other approach that I tried before that will force you to add something like AutoComplete.asmx.

Chris N.P. Over a year ago

Thanks Karl! I will try this as well.

Karl Anderson Over a year ago

@ChrisN.P. - great, glad we could help you out. Good luck. :-)

|

Collectives™ on Stack Overflow

AutoComplete Using JQuery for ASP.NET

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related