How do I autocomplete textbox with jquery

Question

0.00/5 (No votes)

See more:

I am trying to create a textbox that will autocomplete from a SQL database. I have tested my handler and it works. I am having a hard time implementing it.

I know this has been asked before, but I am just not getting it.

Any help is appreciated!
James

What I have tried:

<pre><%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="Mercer911._Default"%>
    
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.12.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(txtOldAddress).autocomplete({
                source: 'OldaddressHandler.ashx'
            });
        });
       
    </script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" >
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
         </p>
<p>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString2 %>" ProviderName="<%$ ConnectionStrings:MyConnectionString2.ProviderName %>" SelectCommand="SELECT [AddressID], [OldAddress], [NewAddress] FROM [AdddressTable]"></asp:SqlDataSource>
</p>
<p>
        <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="OldAddress" DataValueField="OldAddress">
        </asp:DropDownList>
    </p>
    <p>
        <asp:TextBox ID="txtOldAddress" runat="server" Height="20px" Width="278px"></asp:TextBox>
    </p>
</asp:Content>

Posted 6-Jul-17 6:44am

Member 12619971

Updated 9-Jul-17 23:18pm

Add a Solution

Comments

j snooze 6-Jul-17 17:26pm

I've used the below for the jquery autocomplete. The first bit checks the key pressed, and if its a TAB key select the value they are on. Below that with the autocomplete assigns a function action to the source using jquery ajax call to my service page(your ashx page). The service returns json in object format. The search filter is what the person is typing that I send to my service. The minLength property of the autocomplete is how many characters you want to have the person type before going to grab the autocomplete. I chose 3 because I didn't want a huge list scaring the users. Maybe this will help.

$("input[id*='txtAssignedTo']").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
source: function (request, response) {
$.ajax({
url: {myserviceurl},
dataType: 'jsonp',
data: 'searchFilter=*' + request.term + '*',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.FullName + " - " + item.UserId,
value: item.UserId
}
}));
}
});
},
minLength: 3,
select: function (event, ui) {
this.value = ui.item;
}
});

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2017-07-07T01:01:00

Do you see any errors in the browser console? Could be lots of things. First off

$(txtOldAddress).autocomplete({

what is txtOldAddress? It looks like it's just an undeclared and undefined variable. If you think it is going to refer to this

<asp:TextBox ID="txtOldAddress" runat="server" Height="20px" Width="278px"></asp:TextBox>

then view the source of the page (remember js is on the client, it runs off what you see in the browser source, not what you see on your aspx page), do you see any element with an id of txtOldAddress? Even if there was such an element variable names don't automatically refer to html controls, you have to use getDocumentById.

Next you could have url referencing issues.

source: 'OldaddressHandler.ashx'

that will work as long as the ashx file is in the same folder as the content page. Is it? Can you guarantee it always will be? Then there is your ashx file, there could be problems there too. You really need to learn how to debug your client and server code so you can at least identify where various issues might be or at what point the code is failing.

Here is a basic template for getting autocorrect work, it assumes the relevant jQuery and jQuery UI files are correctly referenced and referenced before the script on the page.

<asp:TextBox runat="server" ID="txtOldAddress" />
    
<script>
    $(document).ready(function () {
        $("#<%=txtOldAddress.ClientID %>").autocomplete({
            source: '<%=Page.ResolveUrl("~/OldaddressHandler.ashx") %>'
        });
    });
</script>

public void ProcessRequest(HttpContext context)
{
    string term = context.Request.QueryString["term"];

    // I'll just return the term with a number appended as sample data

    var data = Enumerable.Range(1, 3).Select(i => new { label = term + " " + i.ToString(), value = i.ToString() });

    var s = new System.Web.Script.Serialization.JavaScriptSerializer();

    context.Response.ContentType = "text/json";
    context.Response.Write(s.Serialize(data));
}

Note I use Page.ResolveURL to get my urls so I don't have to worry about their location relative to the page, and I use ClientID to get the proper ID for the textbox.

uvpurohit · Answer 2 · 2017-07-09T23:18:00

Try this-

$("#txtOldAddress").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "OldaddressHandler.ashx",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (sendResponse) {
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
});

How do I autocomplete textbox with jquery

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0