Click here to Skip to main content
11,577,710 members (58,025 online)
Click here to Skip to main content

Autocomplete edit control for Javascript

, 21 Aug 2003 149.6K 1.5K 37
Rate this:
Please Sign up or sign in to vote.
Shows how to implement a Javascript based autocomplete edit control

Introduction

This is a HTML control which integrates autocomplete into the standard textbox. By adding a few lines of code, you can turn any standard textboxes into a user friendly and a rather powerful control.

How it works

Whenever the user types anything in the textbox, the onkeyup event is fired, and the script calls a function. The current text in the textbox is then compared lexically with an array of strings.

Javascript code

<script>
fruits = new Array('apple','pear','orange',
    'mango','durain','grapes','starfruit');
names = new Array('tom','dick','harry','john','petter','foo','bar');
function autocomplete(n,ac_array){
    if (n.value == "") return 0;
    if (event.keyCode == 8 && n.backspace){
        n.value = n.value.substr(0,n.value.length-1);
        n.backspace = false;
    }

    var r = n.createTextRange();    
    tmp= n.value;
    if (tmp == "")return 0;
    for (z=0;z<ac_array.length;z++){
        tmp2 = ac_array[z];
        count = 0;
        for (i = 0;i<tmp.length;i++){
            if (tmp2.charAt(i) == tmp.charAt(i)){
                count++
            }
        }
        if (count == tmp.length){
            diff = tmp2.length - tmp.length;
            if (diff <= 0) break;
            kap = "";
            for (i=0;i<tmp2.length;i++){
                if (i >= tmp.length) kap += tmp2.charAt(i);
            }
            n.backspace = true;
            r.text += kap;
            r.findText(kap,diff*-2);
            r.select();
            return 0;
        }
    }
    n.backspace = false;
    return 0;
}
</script>

<input name='fruit' type='text' class='textbox' title="Opening" 
    onkeyup="autocomplete(this,fruits)" size="20">
<input name='Name' type='text' class='textbox' title="Opening" 
    backspace='false' onkeyup="autocomplete(this,names)" size="20">

How to use the code

  1. You must define the array of strings which you want to have autocompleted.
    fruits = new Array('apple','pear','orange','mango','durain',
        'grapes','starfruit');
  2. Copy the entire autocomplete function and put it somewhere in your code.
  3. Add the event onkeyup='autocomplete(this,fruits)' in the textbox. Note that the 2nd argument should tally with the array name you defined at 1.
  4. Add the property backspace='false' in the textbox. The backspace property is applicable when a user press backspace in the textbox. It gets very irritating without the boolean; i.e. when the user press backspace, the highlighted characters get deleted, but it will automatically be replaced by the same characters due to the autocomplete.

Todo

  1. I've tested the autocomplete control with an array of size 150. The speed was pretty reasonable on my computer (P3 700Mhz). However, I'm sure the autocomplete function's string-matching algorithm can be further improved upon.
  2. Allow for case insensitive string-matching

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

zichun
Singapore Singapore
I'm young and cool Smile | :)

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 1 Pin
hsnfrz3-Dec-12 1:59
memberhsnfrz3-Dec-12 1:59 
GeneralMy vote of 1 Pin
Risvile28-Sep-11 5:00
memberRisvile28-Sep-11 5:00 
GeneralAutoComplete text box using PHP PEAR Class Pin
elizas8-Mar-10 1:27
groupelizas8-Mar-10 1:27 
GeneralMy vote of 2 Pin
gopimayiru22-May-09 2:06
membergopimayiru22-May-09 2:06 
GeneralNot working Pin
Member 246109727-May-08 22:42
memberMember 246109727-May-08 22:42 
QuestionAutocompletion Pin
Pratheesh Rajan4-Oct-07 2:17
memberPratheesh Rajan4-Oct-07 2:17 
GeneralIs it possible to view all elements' list on particular character press Pin
anil22kar9-Sep-07 21:33
memberanil22kar9-Sep-07 21:33 
GeneralProblem with 2 Edit Control !!! Pin
steeve.leprovost4-May-06 3:18
membersteeve.leprovost4-May-06 3:18 
GeneralRe: Problem with 2 Edit Control !!! Pin
tah siah rek ngaran naon deui18-Dec-12 7:44
membertah siah rek ngaran naon deui18-Dec-12 7:44 
Generalnew version Pin
davidlars9921-Feb-06 9:32
memberdavidlars9921-Feb-06 9:32 
Generalmozilla Pin
vadd__26-Feb-05 4:35
sussvadd__26-Feb-05 4:35 
GeneralMuch better... Pin
packard7526-Oct-04 19:38
memberpackard7526-Oct-04 19:38 
GeneralRe: Much better... Pin
zichun27-Feb-05 21:35
memberzichun27-Feb-05 21:35 
GeneralNot working with mozilla Pin
Anonymous24-Jun-04 6:41
sussAnonymous24-Jun-04 6:41 
GeneralTo complete in the hole textrange.. Pin
Anonymous25-Feb-04 2:02
sussAnonymous25-Feb-04 2:02 
GeneralError Pin
Emelian17-Jan-04 17:34
memberEmelian17-Jan-04 17:34 
GeneralRe: Error Pin
zichun17-Jan-04 17:55
memberzichun17-Jan-04 17:55 
Hi Emelian,

The error results due to the array 'name'. Apparently, this is a predefined object in Internet Explorer and thus could not be used. It will work fine if you change the code from

name = new Array('tom','dick','harry','john','petter','foo','bar');

to

names = new Array('tom','dick','harry','john','petter','foo','bar');


and

<input name='Name' type='text' class='textbox' title="Opening" backspace='false' >name)">

to

<input name='Name' type='text' class='textbox' title="Opening" backspace='false' >names)">


thank you for pointing out this error

regards,
zichun
GeneralRe: Error Pin
Emelian17-Jan-04 18:35
memberEmelian17-Jan-04 18:35 
GeneralRe: Error Pin
zichun17-Jan-04 19:22
memberzichun17-Jan-04 19:22 
GeneralMake Case Insensitive Pin
The Silverlord4-Sep-03 23:16
sussThe Silverlord4-Sep-03 23:16 
GeneralRe: Make Case Insensitive Pin
zichun5-Sep-03 5:35
memberzichun5-Sep-03 5:35 
QuestionHow about a sever control? Pin
Paul Haley29-Aug-03 12:07
memberPaul Haley29-Aug-03 12:07 
AnswerRe: How about a sever control? Pin
chenggn8-Apr-06 5:22
memberchenggn8-Apr-06 5:22 
GeneralAll OK, but ... Pin
Mandalay23-Aug-03 20:45
memberMandalay23-Aug-03 20:45 
GeneralRe: All OK, but ... Pin
zichun24-Aug-03 3:35
memberzichun24-Aug-03 3:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 22 Aug 2003
Article Copyright 2003 by zichun
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid