What are the best ways to manage a hefty dropdown list?

Currently working with VB.NET/asp.net, I am faced with a page containing a Formview. Within the Insert and Edit templates, there are numerous dropdownlists for both Depts and People. Each of these templates is divided into multiple sections, with around 3 sections allocated for each Dept and People dropdown. The number of depts counts to about 100, while the listing of people is close to 10,000. It has been specified that if the user is uncertain about the Dept, they should be able to choose from the extensive list of 10,000 people in the dropdown.

Due to this setup, the total pagesize exceeds 5MB....I have already had to adjust the default setting

I am looking for recommendations on how to create a dropdown that can handle such a large amount of data without filtering and significantly reduce the overall pagesize. Are there any solutions available through Ajax or Javascript?

Thank you.

javascriptasp.netdrop-down-menuformview

Answer №1

If you're looking for tutorials on implementing autocomplete functionality, there are plenty available. The basic idea is to use an autocomplete control, which functions as a textbox. As you type in the textbox, let's say 'Abc', it will trigger an ajax call to retrieve all records that match 'Abc''. These results are then fetched from the database using ajax and displayed in a selectable div where you can set up events. You only need to handle the database query to obtain the necessary data; the autocomplete control takes care of the rest.

For more assistance, check out these helpful links:

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

Setting the cache to false during an httpget request in an mvc4 controller action: tips and tricks

My httpget request to a controller action looks like this: $.get('/Course/ExplanationCorrect/', postData, function (data) { $('#SurveyDiv').html(data); }); While it works on all other browsers, I'm facing an issue with IE10 o ...

javascriptjqueryasp.net-mvc-4internet-explorer-10http-get

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascriptjqueryhtml

Whenever the click event is triggered, Ajax is making numerous duplicate calls

Each time I click to fetch my content using an AJAX call, the calls end up duplicating themselves. I've tried various on-click events I came across on Stackoverflow threads, but unfortunately none of them seem to be solving the issue. $(document).rea ...

javascriptjqueryajax

Three.js is experiencing difficulties in loading textures for custom Geometry with ShaderMaterial

A Geometry (pyramid) is defined here with four vertices and 4 faces - var geom = new THREE.Geometry(); geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100)); geom ...

javascriptthree.jstextures

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

I am trying to color every <td> element in a row of three columns with the same color using the following code: for (var i = 0; itr < $("td").length; i++) { $("td").eq(i).css("background-color", Colors[i]); } However, this code colors each i ...

javascriptjqueryhtmlhtml-tableconditional-statements

Transform the date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy with the help of JavaScript

I am looking to convert date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy when the dates are retrieved from a JSON object. Currently, I am utilizing the ng-csv plugin to download this JSON data, which is working properly. How ...

javascriptangularjsdate

Utilizing a dynamically created table to calculate the number of neighbors

I have a challenge where I want to create a minesweeper game with numbers indicating how many bombs are nearby. For example, if there are two bombs next to each other and I click on a cell adjacent to them, it should display the number 2. Likewise, if ther ...

javascriptphpjqueryminesweeper

Implementing an event listener within a knockoutjs custom directive

I have extensive experience as a knockout user, but I am currently struggling to achieve a specific scenario. For the past few days, I have been trying to create a system within a knockout component that allows observables to translate themselves into diff ...

javascriptknockout.jstypescript

Incorporating SQL Database into a Website with Visual Studio 2010

I've been tasked with creating a website that compares two different products. I have created a database with all the information on the products. The challenge now is to make it so when a person chooses a specification, all relevant products are disp ...

asp.netdatabaseweb-applicationsweb

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Tips on choosing vml elements using jquery or vanilla javascript

I am trying to select a VML element using jQuery without relying on 'id' or 'class', but my attempts have been unsuccessful so far. <v:oval id="vmlElement" style='width:100pt;height:75pt' fillcolor="red"> </v:oval> ...

javascriptjqueryhtmldomvml

Building with inline elements in Django

Within my Django 1.7 project, I am working with two closely connected models: Train and Passenger. The Passenger model has a ForeignKey linking it to the Train model. I am looking to create a view where users can add passengers and designate which train ...

javascriptjquerydjangodjango-formsdjango-views

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

javascriptjqueryajax

Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

In my code, I have a function A that accepts another function as an argument. Within function A, I aim to run the given function with one specific parameter and the remaining parameters from the given function. Here's an example: function t(g: number, ...

javascripttypescript

Creating a cutting-edge single page web application with the MERN stack: A comprehensive guide

After researching various articles on building dynamic apps with Express.js using technologies like EJS and Handlebars, I have decided that I want my web app to be dynamic and single page by utilizing React instead. My goal is to render templates and inse ...

javascriptnode.jsreactjsexpressmern

Tips for shutting down an open section within a jQuery Accordion?

I am having trouble closing the active panel using jQuery. The rest of my code is functioning perfectly, but for some reason, I can't get the active panel to close. Currently, the code is working correctly in that only one panel can be open at a time ...

javascriptjqueryhtmlcss

Styling CSS for disabled nested elements

In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS. Typically, adjusting the opacity is my go-to solution to achieve the desired effec ...

javascripthtmlcss

Transmitting JSON Web Tokens from AngularJS to Node.js

A situation has arisen where an AngularJS app must pass a JWT to the Node.js instance that is serving it. The Node.js instance has a /user route which will provide a JWT to the Angular client. What specific modifications should be implemented in the exist ...

javascriptangularjsnode.jsexpress

Accessing a template object in JavaScript using querySelector

Essentially, I am trying to querySelect a <template> from JavaScript but constantly receiving null as the result. JavaScript code: class MyImportWebcomponent extends HTMLElement { constructor() { super(); } connectedCallback() { ...

javascripthtmlweb-componenthtmlelementsnative-web-component

Reorganize a collection of objects to a more intricate structure

As I work on my project to create a table using basic HTML (JSX), I am faced with the challenge of displaying unique dates along with the quantity of apples, strawberries, bananas, and oranges sold each day. The data obtained from the API is causing diffi ...

javascriptalgorithmdata-structures