Make Life Easy With Autocomplete Textboxes
Let’s face it: people really don’t enjoy filling out forms, especially when values need to be typed in. That’s why applications like Microsoft Outlook incorporate autocomplete textboxes — textboxes that examine the first few characters a user has typed, and suggest a word from a given list. Web browsers also work this way when they automatically present a list of URLs as you begin to type a Web address into the address bar.
In this tutorial, with a little bit of JavaScript trickery, we’ll create the same type of behavior in both Internet Explorer (v5.5 and higher) and Mozilla (v1.0 and higher).
Key Takeaways
- Autocomplete textboxes enhance user experience by reducing the need to type entire words or URLs, as seen in applications like Microsoft Outlook and web browsers.
- Simple JavaScript can be utilized to implement autocomplete functionality, making it compatible with popular browsers like Internet Explorer (v5.5 and higher) and Mozilla (v1.0 and higher).
- The tutorial provides methods for selecting text within textboxes and handling different browser behaviors, ensuring a smooth user interaction.
- The autocomplete feature is built using a method that matches user input to a list of predefined strings, offering the first matching string as a suggestion.
- Implementing autocomplete involves handling keypress events, dynamically matching input to suggestions, and updating the textbox display accordingly.
Simple Browser Detection
First, we’ll need to do a little browser detection, so here’s some simple code to accomplish that (though of course, you may use your own instead):
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;This code is obviously not very robust, but it’s sound enough for our purposes; let’s get to the guts of this project.
Selecting the Textbox
The first step in this process is to create a method that will select certain amounts of text in a textbox. We’ll call this method textboxSelect(), and it will take three parameters. The first parameter is the textbox we want the method to act on; the second parameter, which is optional, is the position in which the selection should begin (if this parameter is omitted, then the entire textbox is selected); the third parameter, also optional, is the position at which the selection should end. If the second parameter is provided but there is no third parameter, the textbox is selected from the start position to the end of the text in the textbox.
We will address the easiest case first: if only one parameter is provided, then we should use the textbox’s native select() method to select all the text in the textbox:
function textboxSelect(oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
...
}
}Note that we use the switch statement to determine how many arguments have been filled in. If there’s only 1, that means only oTextbox was provided. Next, we’re going to skip ahead to the case where there are three arguments (with both iStart and iEnd specified). Here, we’ll need to use a browser detect to determine what to do. For Internet Explorer, we’ll make use of a text range.
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) {
...
}
}
}In the bold code, we start by creating a text range for the textbox object. The range then has to be set to its starting and ending coordinates. To move the start of the range, we use the moveStart() method. This method takes two parameters: the type of space to move (“character”), and how many of those spaces to move. The moveEnd() method on the next line has the same parameters. The difference here is that moveEnd() requires the second parameter to be a negative number (think of it as moving the end of the selection back one space, back two spaces, etc.).
In order to get this parameter, we take the negative value of the length of the text in the textbox and add to it the iEnd value. So, if iEnd is 8 and the textbox contains 10 characters, the second parameter becomes –2, and the end of the range is moved back two characters. Lastly, we call the select() method to highlight the range in the textbox.
Accomplishing the same thing for Mozilla is actually very easy. Textboxes have a setSelectionRange() method that takes two parameters: the start and end of the selection. We can pass in iStart and iEnd directly:
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) {
oTextbox.setSelectionRange(iStart, iEnd);
}
}
}Now we’ll take a step back and look at the case when two parameters are given (iEnd is not specified). Essentially, we want to do what we would if there were three arguments, the only difference being that iEnd must be equal to the number of characters in the textbox. We can accomplish this like so:
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
/3b#/case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
}Note that in this case, we do not use the break statement. We want the execution to follow through into the next case, as we’ve set iEnd to an appropriate value. This will now work correctly in all three cases.
The very last part of this function is to set the focus to the textbox so that when a user types, it will replace the selected text:
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
}Replacing the Textbox Selection
Another task we’ll need to be able to do is to replace the currently selected text with some other text. For this, we will create the textboxReplaceSelect() method, which will take two parameters: the textbox to act on, and the text to insert. Because we will use ranges, we’ll need to create different code for IE and Mozilla. First, let’s take a look at the IE code:
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
...
}
oTextbox.focus();
}On line 4, we create a range from the document’s current selection (which we can safely assume is within the textbox, as this will be called on the keypress event of the textbox). On the following line, we replace the range’s text with the given string. On line 6, we call the range’s collapse() method, which sets the length of the range to 0; the parameter, a Boolean, collapses to the end of the range if the value is true, and collapses to the beginning of the range if the value is false. Finally, we select the collapsed range, which places the cursor after the text we just inserted.
In Mozilla, we can achieve the same effect with some simple string manipulation. We can determine the start and end points of the selection by using the Mozilla selectionStart and selectionEnd attributes of a textbox:
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
}On line 9, we are just saving the starting point of the textbox selection; we’ll need it later. Line 10 looks complicated, but in reality it just takes the string prior to the selection and the string after the selection, and adds sText between them. After that, we just need to replicate what we did in IE: set the cursor to appear after the text that was just inserted. So, on line 11, we set the selection range to be the old starting point plus the length of the text that was inserted. This effectively copies what we did for IE.
Matching
The next step in the process is to write a method that will search an array of strings and return the first value that begins with a given string (for example, we need to pass in “a” and have it return the first value in the array that begins with the letter “a”). This method will be called autocompleteMatch() and will take two parameters: the text to match and the array of values to match against.
The search is straightforward — we just iterate through the array and check each value. If the method returns true, then we return the value. If no matches are found, a null value is returned. Here’s the full code:
function autocompleteMatch (sText, arrValues) {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
return arrValues[i];
}
}
return null;
}Note that for this to work correctly, the strings in arrValues must be in alphabetical order.
The Guts
With our other methods built, we can move into the guts of the autocomplete textbox: the autocomplete() method. This method will take three parameters: the textbox to act on, the event object, and an array of possible values. Assuming that we have an array called arrValues, the call would look like this:
<input type="text" onkeypress="return autocomplete(this, event, arrValues)" />We will be looking at the keycode of the pressed key first:
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
...
}
}Note that we still format the event object using our EventUtil.formatEvent() method.
There are several keys that we don’t want to interfere with, such as the cursor keys; we’ll just return true in these special cases:
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
...
}
}Next, we’ll take the default case: when the user types a character. In this case we need to complete a number of steps:
- We must replace the selected text with the character the user typed
- We must try to get a match to the text the user has typed in
- If found, we must set the textbox to the suggested text and set the selection to encompass only the letters that the user did not type
This may sound complicated, but the helper functions we’ve already written will make it much easier.
The important first step is to ascertain the character the user typed (using String.fromCharCode() on the event object’s keyCode attribute (in IE) and charCode attribute (in Mozilla)). We use that character to replace the currently selected text. Then, we need to get the length of the text in the textbox.
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
...
}
}Next, we need to search for a matching value in the array of values using our autocompleteMatch() method.
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
...
}
}After we request a matching value, we need to determine if a match has indeed been found. To do this, we test sMatch to see if it’s null. If it is not null, we need to replace the text in the textbox with sMatch. Then we’ll use iLen (the length of the text actually typed by the user) to select only the text that the user hasn’t typed with the help of our textboxSelect() method.
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
...
}
}After all this, the last thing we need to do is return the value of false to the event handler. If we don’t do this, the typed character will appear twice.
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}Example
The final step, of course, is to make an example that tests the code. Without further ado, here it is:
<html>
<head>
<title>Autocomplete Textbox Example</title>
<script type="text/javascript">
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
}
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
}
function autocompleteMatch (sText, arrValues) {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
return arrValues[i];
}
}
return null;
}
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}
</script>
<script>
var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
</script>
</head>
<body>
<h2>Autocomplete Textbox Example</h2>
<p>Type in a color in lowercase:<br />
<input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p>
</body>
</html>Wrap-up
Users like to be able to type values in instead of using the mouse, and an autocomplete textbox will make them very happy.
The only limitation to this code is that it is case sensitive, though the autocompleteMatch() function can easily be changed to make it case insensitive (I’ll leave you to figure out exactly how!). This code will not work in the Netscape Navigator 4.x family, or on Opera. Its functionality is unknown (but assumed not to work) in other browsers.
Frequently Asked Questions (FAQs) about Autocomplete Textboxes
How does an autocomplete textbox work?
An autocomplete textbox is a user interface feature commonly used in search boxes to make it easier for users to complete words or phrases that they are typing. This feature works by predicting a word or phrase that the user intends to type without the user actually typing it completely. This is done by using a matching algorithm that finds suitable completions for the word or phrase typed so far by the user. The algorithm may use a static list of possible completions, or it may dynamically generate completions from a database.
What are the benefits of using autocomplete textboxes?
Autocomplete textboxes can significantly enhance the user experience. They save time by reducing the amount of typing required, help to avoid spelling mistakes, and can guide users towards the correct search terms. This can be particularly useful on e-commerce websites, where it can help users find products more quickly.
How can I implement an autocomplete textbox in JavaScript?
Implementing an autocomplete textbox in JavaScript involves creating an input field and a dropdown list to display the autocomplete suggestions. You’ll need to add an event listener to the input field that triggers a function when the user starts typing. This function should filter the list of possible completions and update the dropdown list accordingly. You’ll also need to add event listeners to handle the selection of an autocomplete suggestion.
Can I use a library or plugin to add autocomplete functionality?
Yes, there are many libraries and plugins available that can simplify the process of adding autocomplete functionality to your website. These tools provide pre-written JavaScript code that you can customize to suit your needs. Examples include jQuery UI’s Autocomplete widget and the Typeahead.js library.
How can I customize the appearance of the autocomplete dropdown list?
The appearance of the autocomplete dropdown list can be customized using CSS. You can change the background color, font size, font color, and other properties to match the look and feel of your website. You can also add hover effects to highlight the currently selected suggestion.
How can I handle special characters in autocomplete suggestions?
Special characters in autocomplete suggestions can be handled by escaping them before they are displayed. This can be done using JavaScript’s built-in escape function, or by using a library that provides this functionality.
Can I use autocomplete with a database?
Yes, autocomplete can be used with a database to dynamically generate suggestions. This involves sending a query to the database whenever the user types something in the input field, and using the results of the query to update the list of autocomplete suggestions.
How can I improve the performance of my autocomplete feature?
The performance of your autocomplete feature can be improved by limiting the number of suggestions displayed at once, and by implementing a delay before the autocomplete function is triggered. This can prevent unnecessary queries to the database and make your website feel more responsive.
Can I use autocomplete with multiple input fields?
Yes, you can use autocomplete with multiple input fields. Each input field can have its own set of autocomplete suggestions, and you can use JavaScript to control which input field the autocomplete function applies to.
How can I test my autocomplete feature?
You can test your autocomplete feature by typing different words or phrases in the input field and checking that the correct suggestions are displayed. You should also test the feature with different browsers and devices to ensure that it works correctly in all situations.
Nicholas is a front-end engineer, author, and speaker. He currently works at Box making the web application awesome. Prior to that, he worked at Yahoo! for almost five years, where he was front-end tech lead for the Yahoo! homepage and a contributor to the YUI library
