If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Now you need to use a standard handler (onKeyUp) of textbox to call the auto-complete function:

Code:

<input type="text" name="anyName" onKeyUp="Complete(this, event)">

Note we call the function "Complete" (showed below) with two arguments. The first is the keyword "this" to pass the textbox object to function, so we don't need to manipulate names or IDs of textboxes and we can work with multiple textboxes on a page). The second parameter is the keyword "event" to pass the properties of onKeyUp event, so we can handle which key was pressed on the keyboard.

Finally we have the function. As you guess, the name of the function is Complete and here is its code:

When you type a text that that begins with letter "a", the rest of mail address "lbert@mail.com" will be completed in textbox.

So let's look the function.

The first thing we do is ensure that function have all necessary objects to work.

The "obj" variable receives the "this" parameter = textbox object.
The "evt" variable receives the "event" parameter = onKeyUp event properties.
The "aMail" variable is the array created with elements to auto-suggest.

If one of these variables is missing we quit the function.

Code:

if ((!obj) || (!evt) || (aMail.length == 0)) {
return;
}

Now, we need to check if textbox have something typed. If not there's nothing to complete, so quit function

Code:

if (obj.value.length == 0) {
return;
}

Now we need to know which key was typed in textbox. This can be done reading the properties of event. In the case of MSIE this property is named "KeyCode" and in the case of Mozilla this property is named "which".

With the code below, we set the "elm" variable with the right value of the key in accordance with the browser.

Code:

var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;

We need to evaluate the key code aborting the function in the case of non-text keys pressed (arrows, delete, backspace, etc.).

Eh, you could achieve a far more elegant solution if you used the XHR object to inject into a php script's query string, which would contact a database that encompassed all your contacts (email addresses, phone numbers, etc).

You won't have to loop through the array to check values.
You won't have to find what keyboard characters you pressed.

The PHP script would just listen for an input...and the input would be put into the SQL statement--eg:

Thanks but that still doesn't solve the validation part of it. Your recommendation is just an alternative to the AutoComplete function. Maybe it's better maybe not...

"Validation using onBlur"--Can you be more specific? What do you want to validate? Do you want to check if the contact is in your resultset?

So, this is the use case that I picture:

[1] User types in "smi", 500 milliseconds later a resultset pops down with all the Smiths
[2] User chooses "John Smith <john_smith@smith.com>" and sets the textfield value as "john_smith@smith.com".
[3] User presses the TAB key and actives the onBlur event
[4] --????????

What do you see as step 4? What's the scenario that you envision for validation?

Do you mean to say, if they wanted to try and trick the autocomplete by going back to the field and adding a "d" to the end of it, so it's "john_smith@smith.comd" so that it'll send the email to an invalid address?

Yes! And thank you for elaborating on the details. I apologize for not being more specific. your list sum's up what I am trying to do.

1. The user types in "smi" all the smiths appear.
2. User chooses John Smith and it sets the text field to "John Smith".
3. User hits Tab Key and activates onBlur event
4. Event triggers function to check that "John Smith" is in the array.

It may seem weird that I want to validate this because john smith is obviously in the array (because his name came up in the list) - but here is why I want to validate it:

Because this simple auto-complete function (above) works great. But it doesn't prevent someone frome typing something into the form that doesn't match the array, it simply uses the array to "Suggest" a name for them. I want "Lock-down" the form field so that it uses the array to "Suggest" and also to validate. So that they can't type a name into the field that is NOT on the array.

Thank you so much for your patience and assistance. I apologize for not being this specific.

Because the list (of names) is over 500+. I don't want to bind a list of 500+ items to a drop-down. Would you?? I want to allow the flexibility of "directory searching" capeabilities but I don't want to allow the user to enter in bogus names cause I later use the name they enter to attach their managers email address to a hidden var before I insert and send emails.

In the above example, your input text field should have onBlur='AutoComplete.validate(this);' as an attribute.

So, this is the updated use-case

1. User types in smi
2. Resultset appears with all Smiths
3. User chooses John Smith <john_smith@hotmail.com>
4. Text field is set to john_smith@hotmail.com
5. User presses tab and activates onBlur
6. AutoComplete's validate function is fired and accepts the value of the textfield (john_smith@hotmail.com)
7. AutoComplete object will check the completed input value against the resultset's "emailAddress" values
---
SUCCESS CONSTRUCT
8. User is not prompted and assumes that their input is valid.
---
FAILURE CONSTRUCT
8. User is notified with an alert() saying that their input is not valid. They must choose a proper value within the resultset. You may also want to reset the focus to the original text field and maybe even clear the old value....that's completely up to you; do whatever you think would make your users more productive.

Simple auto-complete function

BuezaWebDev, thanks for your time in puttting together this code. I didn't expect anyone to just bust something out. Too cool man! But i'm not exactly sure how to incorporate it into my existing app and your USE CASE is slightly off (sorry). To follow up on USE CASE here it is:

1. The user types in "smi" all the smiths appear.
2. User chooses John Smith and it sets the text field to "John Smith" (not to john smiths email address).
3. User hits Tab Key and activates onBlur event
4. Event triggers function to confirm that "John Smith" is in the "aName" array.

** So heres my question, how can I use JUST your validation function (you so gladly put together) in my existing .js file and just have it validate that the name they typed into the form, matches a name from the array.

I want to add a function to the end of this code to validate that the name they typed into the form, matches a name form the array. If there is a match they move to the next formField. If no match is found it alerts them and reset's focus back to the form field.

function validate(inputField)
{
var input = inputField.value;
for (var i in aName)
{
if (input != aName[i].toString())
{
//Alert the user that they have an invalid input.
//Suggestion: use another DIV element to pop up instead of an
//alert box, a div would actually be more user-friendly.
alert(input.toString() + ' is not a valid input for this field.');
//Resets the focus of the previous text field
inputField.focus();
//Quits the function as soon as the input does not match what is in
//the aName array.
return false;
}
}
return true;
}

Just add that to the bottom of your .js file.

For the specified input field, add the onBlur attribute adn set the value to "validate(this);".