CODEWITHSUNDEEP
c#jqueryasp.netsql
Neo
Neo

Reputation: 16239

How to create auto complete in jquery with asp.net

I'm using this following code for auto complete feature , but I need to fetch values from database using sql server 2008 and C# , asp.net.

<!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.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/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>

How can i fetch that array list values from my database using (EF4 and asp.net)

Upvotes: 0

Views: 1815

Answers (2)

Spencer Ruport
Spencer Ruport

Reputation: 35117

The first step is to create a C# ASP.Net page which produces a JSON result that the autocomplete plugin can parse. According to the documentation you can use the two following formats:

Array: An array can be used for local data.
There are two supported formats: An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

http://api.jqueryui.com/autocomplete/#option-source

Alternatively you can use a function to parse out whatever format you need but it sounds like the simplest solution will fulfill your needs.

I'm going to assume you're using ASP.Net forms which isn't really tuned for this kind of thing but you can still make it work with some tweaking. Let's create a page in your web application root called SearchResults.aspx.

The first thing to do is to clear out everything from your ASPX file except the line:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchResults.aspx.cs" Inherits="ASP.Net_Forms.SearchResults" %>

Then you're free to change the code behind to output whatever format you like. In this case we'll be using JSON in a structure that Autocomplete can understand natively. We'll also need to set the response type.

public partial class SearchResults : System.Web.UI.Page
{
    private class SomeSearchableClass
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // The autocomplete plugin defaults to using the querystring
        // parameter "term". This can be confirmed by stepping through
        // the following line of code and viewing the raw querystring.
        List<SomeSearchableClass> Results = SomeSearchSource(Request.QueryString["term"]);

        Response.ContentType = "application/json;charset=UTF-8";

        // Now we need to project our results in a structure that
        // the plugin can understand.

        var output = (from r in Results
                        select new { label = r.Name, value = r.ID }).ToList();

        // Then we need to convert it to a JSON string

        JavaScriptSerializer Serializer = new JavaScriptSerializer();
        string JSON = Serializer.Serialize(output);

        // And finally write the result to the client.

        Response.Write(JSON);
    }

    List<SomeSearchableClass> SomeSearchSource(string searchParameter)
    {
        // This is where you'd put your EF code to gather your search
        // results. I'm just hard coding these examples as a demonstration.

        List<SomeSearchableClass> ret = new List<SomeSearchableClass>();

        ret.Add(new SomeSearchableClass() { ID = 1, Name = "Watership Down" });
        ret.Add(new SomeSearchableClass() { ID = 2, Name = "Animal Farm" });
        ret.Add(new SomeSearchableClass() { ID = 3, Name = "The Plague Dogs" });

        ret = ret.Where(x => x.Name.Contains(searchParameter)).ToList();

        return ret;
    }
}

And finally just change your jQuery to use the correct source:

$( "#tags" ).autocomplete({ source: "/SearchResults.aspx" });

Upvotes: 1

Murali Murugesan
Murali Murugesan

Reputation: 22619

See this below sample from jQueryUI Autocomplete Example

Hope you can do by yourself!.

All you need to do is call some page or handler and prepare JSON data. 

  $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "yourpage.aspx",
                dataType: "jsonp",
                data: {

                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

Upvotes: 1

Related Questions