I have encountered an issue concerning the functionality of an ASP Textbox with AJAX autocomplete. It

I recently started using this method for auto complete, and after a few hours of research, I finally managed to make it work. However, the behavior of the method seems strange to me. Although I am able to get the list of options for auto complete, it does not home in on the right possible match but rather stays on the first line under the text box.

Here is how I declare it:

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ac" %>

In my aspx file, I use this tag:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"  EnablePartialRendering="true">
</asp:ScriptManager>

                    <asp:TextBox ID="TBX_theMonthInsert" runat="server" Width="60" />

For the AJAX part, here's what I have:

<ac:AutoCompleteExtender ID="AutoCompleteExtender1" EnableCaching="true" BehaviorID="AutoCompleteCities" TargetControlID="TBX_theMonthInsert" ServiceMethod="GenerateMonthNames" MinimumPrefixLength="2" ContextKey="GenerateMonthNames"  CompletionSetCount="2" runat="server" FirstRowSelected="true" CompletionInterval="350" ShowOnlyCurrentWordInCompletionListItem="true">
                   </ac:AutoCompleteExtender>

And here's the code behind:

[ScriptMethod()]
[WebMethod]
public static string[] GenerateMonthNames(string prefixText, int count, string contextKey)
{
    List<string> items = new List<string>();
    items.Add("Oliver");
    items.Add("Olsen");
    items.Add("learns");
    items.Add("how");
    items.Add("change");
    items.Add("world");
    items.Add("engaging");

    return items.ToArray();
}

Answer №1

The issue I encountered was related to searching for a specific term within the function 'GenerateMonthNames', specifically in relation to the 'prefixText' parameter.

    public static List<string> GenerateMonthNames(string prefixText)
    {
      List<string> items = new List<string>();
         items.Add("Oliver");
         items.Add("Olsen");
         items.Add("learns");
         items.Add("how");
         items.Add("change");
         items.Add("world");
         items.Add("engaging");  

         var returnList = items.Where(item=>item.Contains(prefixTest)).ToList();
         returnList.Sort();
         return returnList; 
     }

I found that this missing piece of code is important in the implementation of the auto-complete feature - specifically, in the code behind section.

When typing in the designated TextBox, it activates the "on text changed" trigger for the ajax autocomplete functionality to execute.

This event triggers the ajax code behind auto complete "command" and sends the 'prefixText' as a parameter with each keystroke entered in the targeted TextBox.

In this example, the code behind method ('GenerateMonthNames') searches for partial matches of the 'prefixText' parameter within each element of the list. It filters out any elements that do not contain the text entered in the target TextBox (which was the part I was missing).

Hopefully, this explanation will help others who are new to using ajax autocomplete and facing a similar problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Joomla 2.5 and mootools for ajax - passing parameters to a component

After countless hours of searching for a solution to this persistent issue, I find myself stuck with the following code in a standard component along with its controller: defined('_JEXEC') or die; jimport('joomla.application.component.cont ...

Django getJSON with jQuery causing sessionid cookie mismatch

Encountering a problem with getJSON where it is sending an incorrect value for Django's sessionid cookie. There is an API operating on port 8000. When accessing this URL: http://localhost:8000/api/accounts/banner, it returns a JSON document if there ...

Is it possible to render a web page in C++ that includes JavaScript, dynamic html, and retrieve the generated DOM string?

Is there a way to fetch and extract the rendered DOM of a web page using C++? I'm not just talking about the basic HTTP response, but the actual DOM structure that is generated after JavaScript has executed (possibly after allowing it some time to run ...

Instead of receiving plain text in my PHP response to an AJAX call, I am getting back an array

Python if($un!="" && $psw!=""){ $query=mysqli_query($db,"SELECT * FROM users WHERE (username='$un' OR email='$un') AND password='$psw'"); $exist=mysqli_num_rows($query); if($exist==1){ session_start(); $_SESSI ...

triggering ajax events before server response

I am facing an issue with ajax post data to my express server in nodejs. I have a callback function on the server side that responds to the client ajax after completing DB access. However, the ajax .fail is firing before my server callback function complet ...

Serialize latitude and longitude coordinates into JSON format using C# programming language

I am interested in converting this class into JSON format. public class Location { public string city {get; set;} public double population {get; set;} public double Latitude {get; set;} public double Longitude {get; set;} } This can be achieved u ...

Refreshing a div using ajax technology

I am attempting to use Ajax to update an h3 element with the id data. The Ajax call is making a get request to fetch data from an API, but for some reason, the HTML content is not getting updated. This is how the JSON data looks: {ticker: "TEST", Price: 7 ...

JavaScript not functional, database being updated through AJAX calls

I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...

Online mailbox feature

My website currently has a "Contact us" form that uses the mailto: function to send emails to my Yahoo account. I am now looking to set up a mailbox directly on my site admin page so I can manage these emails more efficiently by replying or deleting them a ...

ajax request fetching new data upon webpage reload

I'm encountering an issue where a JSON jQuery call only works when the page is refreshed after loading. Meaning, on initial page load, the data is not updated, but upon refreshing the page, the data is refreshed successfully. This data feeds into a se ...

Deleting data using the Ajax method in a Spring Boot application

Despite my efforts to find a solution by researching various forums discussing the same issue, I am still unable to resolve the error message 'Request method 'DELETE' not supported'. An Ajax call is triggered when a user on the client- ...

What steps should I take to utilize the GET request in this situation?

Having a C# application and an express server, where the server contains a JSON file with a specific name, how can I send a Get request from the C# app to the server to retrieve that particular file? The current functionality allows the app to communicate ...

Best Practices for Managing Long Running Tasks in ASP.NET 4.0 with C#

How should I handle processes that require a long execution time? I want to avoid running them on the server because it may cause the page to time out. I have researched various methods such as AJAX, Threading, and Web Services, but I do not have experien ...

Having trouble reaching an element within a successful Ajax call

I have encountered an issue where the element is not being recognized when putting an ajax call inside another ajax call. Here is an example of the code: $.ajax({ url: 'controleFatAcoes.php', type: 'post', dataType: 'h ...

Using $.ajax to make asynchronous requests in ASP.NET Web Forms

I am currently working on incorporating the $.ajax method into my sample program. The structure of the page is as follows: <form id="form1" runat="server"> <div> Country: <asp:TextBox ID="txtCountry" runat="s ...

unexpected JSON response

I am facing an issue with JSON requests. On a page, I have two separate requests - the first one functions correctly, but the second keeps throwing an unexpected token error that is puzzling to me. The first AJAX call: $.ajax({ type:'PO ...

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

Tips on managing ASP .NET API's HttpResponseMessage for file downloads

I came across a solution on how to download a file from an asp.net API at this link: As a result, I created an API handler with the following code: public HttpResponseMessage Post([FromBody]dynamic result) { var localFilePath = graph ...

Tips for organizing AJAX code to show images and videos in HTML with a switch case approach

I have 2 tables, one for images and one for videos. Within my HTML code, I have three buttons: slide_image, video, and single_image. Using iframes, I am able to load images and videos on the same page. When I click on the slide_image button, it displays im ...