DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • GDPR Compliance With .NET: Securing Data the Right Way
  • How to Enhance the Performance of .NET Core Applications for Large Responses
  • Zero to AI Hero, Part 3: Unleashing the Power of Agents in Semantic Kernel
  • Developing Minimal APIs Quickly With Open Source ASP.NET Core

Trending

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • 5 Subtle Indicators Your Development Environment Is Under Siege
  • A Developer's Guide to Mastering Agentic AI: From Theory to Practice
  • How to Convert XLS to XLSX in Java
  1. DZone
  2. Coding
  3. Frameworks
  4. Create an ASP.NET MVC AutoFill Control, Part 1

Create an ASP.NET MVC AutoFill Control, Part 1

Everyone needs a little help when data entry requires some validation. Today, we present a way to give the user some data hints based on their input.

By 
Jonathan Danylko user avatar
Jonathan Danylko
·
Jan. 11, 18 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
9.3K Views

Join the DZone community and get the full member experience.

Join For Free

Everyone needs a little help when data entry requires some validation. Today, we present a way to give the user some data hints based on their input.

In a recent project, I was asked to create a textbox with a "permanent placeholder."

A whaaaaa?

So I decided to follow up and ask what they meant by a permanent placeholder.

"You know...so users could receive a hint when they didn't know the correct name of a company."

"As they type, it shows a possible company name IN the textbox."

After searching, I found this example from Geoff Graham on CSS Tricks. This is exactly what they were talking about, but it didn't help.

See the first name? They type the first letter and the suggestion displays the remaining letters as highlighted text.

The only thing it did was present me with the functionality of what I needed.

The animated GIF was the end goal, but HOW to do it was the dilemma.

Requirements for Autofill

Let's examine how we want this textbox to function.

  1. As they start typing a company name, they may stop to think about the spelling and require a hint.
  2. We should check the database for a partial company name.
  3. Display the suggestion with the remaining letters highlighted or grayed out in the textbox.
  4. Once they are satisfied with their input, they click tab to move to the next field and their company name is accepted.

1, 2, and 4 isn't hard at all. 3 is the problem.

Why?

If we wanted to go with the grayed out text instead of highlighted text, there isn't a way in a textbox to display text in one color for the input and the remaining suggestion in a different color.

Highlighting text is probably the better way to accomplish this, but we'll cross that gray bridge when we get to it.

Overview

First, we need a textbox.

@using (Html.BeginForm())
{
    <div class="form-group">
        <div class="row">
            <div class="col-md-4">
                @Html.Label("Company", "Company:")
                <span class="autofill">
                    @Html.TextBox("CompanyTextBox", String.Empty, new
                    {
                        @class = "form-control input-sm"
                    })
                </span>
                <p class="help-block">Enter the company name (i.e. Apple, Microsoft).</p>
            </div>
        </div>
    </div>
}

Boom! Done!

Make the Call!

Next, we need an API to retrieve our one company based on input. I created a Services controller with a fake database call (you can modify it as you see fit).

I added a new item (Web API Controller Class) called ServicesController.

using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;

namespace AutofillDemo
{
    [Route("api/[controller]")]
    public class ServicesController : Controller
    {
        // GET api/<controller>/5
        [HttpGet("{id}")]
        public List<string> Get(string id)
        {
            var partialCompanyName = id;

            // Create a repository to access your database here.
            // For now, we'll create a small list 
            //   of companies for demonstration purposes.
            var list = new List<string>
            {
                "Apple",
                "Microsoft",
                "Google",
                "MicroCenter",
                "Microtek",
                "MicroSystems"
            };

            var company = list.OrderBy(e => e).FirstOrDefault(e => 
                e.StartsWith(partialCompanyName));

            // if company is null, use an empty string.
            // Else, use the company. :-)
            return new List<string> { company ?? "" };
        }
    }
}

I removed the additional HTTP verbs from the API since we don't need them at this time.

Since we have our web service built, you can test it out by running the app and typing http://localhost:<port>/api/Services/Micro into your browser. Our service should return back. "MicroCenter."

Perfect!

Some [JavaScript] Assembly Required

Now that we have our HTML and web service in place, we require JavaScript to make the magic happen.

One of our requirements is we need to give the user enough time to finish typing. Once they stop, give them a second or two to think about it.

For this functionality, we need to execute a function after a certain delay.

We also need a function to highlight (or select) the remaining characters so we can continue typing as the hints keep coming.

$.fn.delayKeyup = function (n, t) {
    var i = 0;
    return $(this).keyup(function () {
            clearTimeout(i);
            i = setTimeout(n, t);
        }),
        $(this)
};

$.fn.selectRange = function (start, end) {
    return this.each(function () {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Of course, you need jQuery to make these functions work.

The selectRange checks to see which browser we're using with the if statement.

Let's set up our events to use these functions.

$(function() {

    var company = $("#CompanyTextBox");

    $(company).delayKeyup(function() {

 var partialCompanyName = $(company).val();

        // if there's nothing there, don't do anything.
        if (partialCompanyName.length === 0) {
            return false;
        }

        // grab company names based on the partial
        $.getJSON("/api/Services/" + partialCompanyName)
            .done(function(data) {
                if (data) {
                    var returnedCompany = data[0];

                    // Remaining highlighted characters
                    $(company).val(returnedCompany);
                    $(company).selectRange(partialCompanyName.length,
                        returnedCompany.length);
                }
            })
            .fail(function() {
                console.log("error");
            });
     }
 , 1000);
});

After grabbing the user input, we check to see if it's empty. If so, stop what you're doing and return false.

After validating input, we make the request to return the company name through our API.

We set the returned company name in the textbox and set the selected range of characters based on the user's input.

The 1000 at the bottom is for a 1-second timeout. Set it at your discretion, but don't make them wait too long.

Conclusion

While we could use suggestion drop-downs, I felt this was more of a challenge to offer hints to users without the need to click on a drop-down.

This particular technique got me thinking -- could we do something by graying out the highlighted characters (as mentioned at the beginning of this post) and making them more transparent like a placeholder?

How could it be done? I've got an idea, so stay tuned.

Do you think you know how to do the transparent placeholder? Would we need CSS? Post your comments below and let's discuss.

ASP.NET MVC ASP.NET

Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • GDPR Compliance With .NET: Securing Data the Right Way
  • How to Enhance the Performance of .NET Core Applications for Large Responses
  • Zero to AI Hero, Part 3: Unleashing the Power of Agents in Semantic Kernel
  • Developing Minimal APIs Quickly With Open Source ASP.NET Core

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!