Control TextBox's AutoComplete Action

Chris Love

Last Updated - Sat Jan 09 2021

Today I was working on a Web Form and noticed a property in the TextBox control called AutoCompleteType. I had never noticed it before and my interest was piqued. My first thought was it must be an injected property from an AutoComplete extender on the page, but no there was none available. Then I started to wonder if maybe there was some sort of crude AJAX auto complete facility built into the Web Form infrastructure that had not noticed before. Again no, and a big whew at the same time.

Turns out this is an answer to one of those questions I have had over the past few years, 'Can I have some more control over what the browser injects into form fields?' The answer is yes and here is how this property helps. From what I can tell it was quietly added to the TextBox Control in ASP.NET 2.0.

Browser AutoComplete in Action

First, in case you do not know what I am talking about, when a user begins typing a value in an input field with its type set to text most browsers will offer suggestions from previous times an input of the same name was submitted. Some toolbars will also be so bold as to automatically fill in the user's information for them if it can reasonably determine what they will enter. I do not use any toolbars and honestly recommend removing them to anyone who asks because that cause more headaches than they prevent. But that is another topic. Users can also turn this feature on and off in Internet Explorer.

Configure AutoComplete in IE 8

So how does this work? Microsoft has written a nice article on what is going on when you use AutoComplete in HTML Forms. And from what I can tell this is not limited to Internet Explorer, but so far IE seems to be the only browser I can find information about controlling the AutoComplete functionality through markup. I did find a few mentions of turning off the AutoComplete feature for an input field, but I think most articles on the subject are going to be obfuscated in search results by AJAX AutoComplete articles.

When you set the AutoCompleteType value in a TextBox Web Control you will see a dropdown list of choices, both setting it from the properties window or in the source. These choices are derived from the AutoCompleteType enumeration. You will see many familiar personal identifiers in the list; FirstName, LastName, HomePhone, HomeStreetAddress, etc. These are all common vCard attributes.

Setting AutoCompleteType in Visual Studio

If you are not familiar with the vCard specification then I encourage you check it out. Basically a vCard is used to organize contact information for a person or entity. When you add someone's contact information to Outlook it creates a vCard data structure that can be imported or exported to and from other applications supporting vCard. If you read my HttpHandlers eBook or saw one of my presentations on handlers last year you saw me demonstrate this functionality.

Internet Explorer looks for a custom attribute called vcard_name to drive the AutoComplete behavior. This attribute should specify the particular vcard property you want to suggest values, like vcard.firstname for example.

vcard_name Attribute in the HTML

For a complete list of potential property names refer to the Microsoft article on implementing the AutoComplete functionality.

One thing to note here is the use of a custom attribute in the input tag. This will cause you to fail validation tests, but is not legally wrong. From what I know browsers will either use the field or ignore it gracefully. I am not looking to start any sort of debate on using custom attributes or not, that is up to you. I have not formulated an opinion at this point, but do find adding custom attributes very useful, especially when creating more complex jQuery selectors.

Since the AutoComplete functionality is driven by HTML and not specific to the Web Control itself you can add this to any page you need. Since I am trying my best to wean myself away from Web Controls right now this is good news. I did look through the MVC extension methods for TextBoxes and did not see where this feature was accounted for, but I could have missed it. I have not formally started doing any MVC at this point, so take my comment for what it is worth. But I hope this helps you make your user's experience a little better.