Using JavaScript to enable autocomplete functionality in an ASP.NET combobox

Is there any way to use JavaScript functions with the asp AJAX Toolkit autocomplete combobox? I'm looking for a way to select the selected item text or value on the client side.

Thanks, Atif

Answer №2

<script type="text/javascript">
    function showAutoComplete(sender, eventArgs) {
        var selection = $("#<%= TextBox1.ClientID  %>").val();

        if (selection.length > 0) {
            var item = $("li[_value^='" + selection + "']", ".CompletionList").get(0);
            Sys.Debug.traceDump(item);
            if (item)
                $find("AutoCompleteEx")._setText(item);
        }
    }
</script>

<asp:Label runat="server" AssociatedControlID="TextBox1" Text="Select the first value that starts with: " />
    <asp:TextBox runat="server" ID="TextBox1" />&nbsp;
    <br />
    <asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox2" Text="Choose value: " />
    <asp:TextBox runat="server" ID="TextBox2" />
    <ajax:AutoCompleteExtender runat="server"
            BehaviorID="AutoCompleteEx"
            ID="autoComplete1" 
            TargetControlID="TextBox2"
            ServicePath="Default.aspx" 
            ServiceMethod="GetCompletionList"
            MinimumPrefixLength="2" 
            DelimiterCharacters=";, :"
            CompletionListCssClass="CompletionList"
            OnClientShown="showAutoComplete"
            ShowOnlyCurrentWordInCompletionListItem="false" >
     </ajax:AutoCompleteExtender>

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

The code mistakenly sends an object in place of a numerical value

The script below is causing an issue where an object is being sent instead of a number. This is resulting in a console error: GET http://localhost:8080/new_prog_22/paginator.action?page=[object%20Object] 500 (Internal Server Error) The requirement ...

Retrieving the chosen option from a dropdown menu using AngularJS

<tr (click)="onRowClick(myDropDownList.value)"> <td> <select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)"> <option *ngFor="let n of numbers" [value]="n">{{n}}</option> </se ...

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

I am currently working on a project using react, redux, and material ui. I need to retrieve data from a TextField in order to make an order. The code snippet below showcases my current implementation: <Select value={product.color_set[0].title}> { ...

Guide on how to use ajax to update items in a ListView on an asp.net web form

I have a listview and ajax set up in an asp.net web form. One section of the form displays comments that readers can rate positively or negatively. The issue is that these ratings are not updated unless the page is refreshed. Is there a way to dynamically ...

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

Store data in LocalStorage according to the selected value in the dropdown menu

Can you help me understand how to update the value of a localstorage item based on the selection made in a dropdown menu? <select id="theme" onchange=""> <option value="simple">Simple</option> <option valu ...

Using Vuetify 3 to conditionally render v-icon inside a v-data-table

I am struggling to display a v-icon conditionally in a v-data-table within Vuetify 3, based on a value of either 1 or 0. In Vuetify 2, there were multiple easy ways to achieve this, but it's not rendering in the latest version. I want to show v-icons ...

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

I am currently working with nextjs version 13.5.6 using the app router and app directory. This issue arises during the compilation of the route app/(home)/page.js. The folder and file structure within the app folder is as follows: app/ -(home)/page.js -ser ...

"Be sure to add a table to the req.body information

Building on the topics of my recent inquiries about fetching data from async functions and adding IDs to checkboxes using loops on Stack Overflow, I am faced with a new challenge. I am attempting to retrieve the checked checkboxes using Node.js and Express ...

How to exit an ASP.NET application by pressing the exit button

I am new to asp.net and currently using Visual Studio 2012. Currently, I am working on a login page where I have two buttons: Login and Exit. Whenever I click on the Exit button, I want the application to close and also stop the debugging process. I cam ...

The code snippet `document.getElementById("<%= errorIcon.ClientID %>");` is returning a null value

I need to set up validation for both the server and client sides on my registration page. I want a JavaScript function to be called when my TextBox control loses focus (onBlur). Code in the aspx page <div id="nameDiv"> <asp:Upd ...

The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

I have a reusable input component that is being used in various places. Everything works well with the number input, but the issue arises when I completely clear the input. This action triggers a warning message in the console: [Vue warn]: Invalid prop: t ...

What is the best way to convert the javascript code into clojurescript?

Looking to utilize capacitor/app in order to determine the state (background or active) of my iOS app. My project is built on Clojurescript, so I need to convert the following javascript code into a clojurescript equivalent. Javascript import { App } fro ...

Is there a way to effortlessly upload numerous files in one go when browsing with jquery or JavaScript?

Currently working on a web application and looking to enable multiple file upload functionality within a single browse session, as opposed to selecting one file at a time. The goal is for users to be able to easily select multiple files with just one clic ...

What is the correct way to update the state of an object in ReactJS using Redux?

Hello, I am facing an issue with storing input field values in the state object named 'userInfo'. Here is what my code looks like: <TextField onChange={this.handleUserUsername.bind(this)} value={this.props.userInfo.username} /> ...

What is the best way to pass default event argument alongside another argument in React?

This snippet demonstrates the function I wish to call when a certain input type is invoked: _handleOnEnterPress = (e, receiverUserId) => { if (e.keyCode === 13) { // assuming keycode 13 corresponds to 'enter' console.log("pressed ...

Modify the CSS class by utilizing ngClass

Is it achievable to modify only one out of multiple classes assigned to an element without affecting the others? Illustration: <span ng-class="{'result warning' : error, 'result passing' : !error}"></span> In this code sn ...

Graphical user interface already constructed for importing .csv files and inserting information into a MySQL database

Looking for a plugin that can assist me in transferring a .csv file to a mySQL database. Initially, I was planning on creating this functionality myself but I believe that the necessary code may already exist. Below, you will find a detailed description of ...

Optimizing an ASP.NET web application for seamless integration with Angular 2 and TypeScript

For the past couple of days, I have been delving into angular2. I am curious to understand the process of configuring my project to effectively utilize angular2 and typescript. My development environment is Visual Studio 2015. Can you guide me on the nec ...

Retrieving complete database in JSON format with the help of the mysql node.js driver

Currently, I am working on developing a JavaScript file to extract a JSON dump from an entire MySQL database that is running on the server side. I have successfully found and implemented the MySQL driver for node.js for executing queries. While the process ...