Implementing Autocomplete textbox in ASP.NET

1.3k views Asked by At

I am trying to get an autocomplete textbox working for my website on a web form. This is to autocomplete the textbox with house names once the user has started typing. The sql database is connected and the ado.net model is all set up. I just can't seem to figure out why it is not working.

The aspx page is below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <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>
            <script type="text/javascript">
                $(function () {
                    $("#<%=txtHouseName%>").autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: "WebForm1.aspx/GetHouseName",
                                data: "{ 'pre':'" + request.term + "'}",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
                                    response($.map(data.d, function (item) {
                                        return { value: item }
                                    }))
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert(textStatus);
                                }
                            });
                        }
                    });
                });
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

  <h3>Auto Complete Textbox without using Web Service</h3>
    <table>
        <tr>
            <td>House Name: </td>
            <td>
                <div class="ui-widget" style="text-align:left">
                     <asp:TextBox ID="txtHouseName" runat="server" Width="350px" CssClass="textboxAuto"  Font-Size="12px" />
                </div>
            </td>
        </tr>        
        </table>
    </div>
    </form>
</body>
</html>

and this is the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Houses_of_Mayo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<string> GetHouseName(string pre)
        {
            List<string> allHouseName = new List<string>();
            using (HOMEntities h = new HOMEntities())
            {
                allHouseName = (from a in h.Houses
                                  where a.Name.StartsWith(pre)
                                  select a.Name).ToList();
            }
            return allHouseName;
        }
    }
}
0

There are 0 answers