I'm building a page where one can create an event. The user can enter the name of the venue, and I want to include an autocomplete function to check if the venue exists in the database so as to prevent duplicates and misspelt names and other such user errors. I've followed 2 different tutorials on YouTube on this, and those examples work fine. However, mine do not. And with the exception of using my own database and therefore a different stored procedure, my code is identical. I downloaded the full jquery ui plugin with all the widgets just to make sure I hadn't missed anything. I have a feeling I've made a mistake somewhere but VS or the browser didn't throw any errors.

Here's my stored procedure:

Create proc spGetVenueNames @VenueName nvarchar(50) as Begin Select venuename from venues where venuename LIKE @VenueName + '%' End

This was created fine, and works with a sample parameter. Here's the handler file code

public class VenuesHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string term = context.Request["term"] ?? "";
        List<string> venuenames = new List<string>();
        string conn = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        using (SqlConnection sqlcon = new SqlConnection(conn))
        {
            SqlCommand cmd = new SqlCommand("spGetVenueNames", sqlcon);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@VenueName", term);
            sqlcon.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                venuenames.Add(rdr["venuename"].ToString());
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        context.Response.Write(js.Serialize(venuenames));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

If I browse to the handler and add a parameter, for example /VenuesHandler.ashx?term=r, it displays the results accordingly. Finally, here's the .net code.


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div class="form-horizontal">
        <h4>Create a new event</h4>
        <hr />
        <asp:ValidationSummary runat="server" CssClass="text-danger" />
        <script src="../Scripts/jquery-2.1.4.js"></script>
        <script src="../Scripts/jquery-ui.js"></script>
        <link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<div class="form-group">
            <asp:Label runat="server" AssociatedControlID="txtVenuename" CssClass="col-md-2 control-label">Venue</asp:Label>
            <div class="col-md-10">
                <asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" TextMode="SingleLine" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtVenuename"
                    CssClass="text-danger" ErrorMessage="The venue name field is required." />
            </div>
        </div>
        </div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= txtDate.ClientID %>').datepicker({
                showOn: 'focus',
                dateFormat: 'dd/mm/yy'
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= txtVenuename.ClientID %>').autocomplete({
                source: 'VenuesHandler.ashx'
            });
        });
    </script>
</asp:Content>

Incidentally, the datepicker script works fine and as expected. What am I missing here?

Related posts

Recent Viewed