ajax loading query in separate div

Question

My problem is: when a user presses a key, a div will be shown with all the users who have a firstname starting with the users input. It's mandatory that I need to select something. The problem is when user enter an invalid entry instead of selecting it from the showned div. How to validate it

function getDcode(str)
{
    document.getElementById("codes").style.display = "block";
    if (str.length==0)
    {
      document.getElementById("codes").innerHTML="";
      return;
    }
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
    {
      alert ("Your browser does not support XMLHTTP!");
      return;
    }
    var url="<?php print WEB_URL?>load_code/";
    url = url + str;
    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}

Answer 1

I believe want to have an auto-complete text field?,

If yes I suggest try jquery auto-complete

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

Answer 2

I am not getting this...

You do want to have manual entry but are allowing the users to press a key?

I am not sure if that is possible to implement.

Answer 3

Here's one solution, using jQuery. Customize to use your own class/regex

Odell, Den. "Chapter 8 - Form Controls". Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation. Apress. © 2009. Books24x7. http://common.books24x7.com/book/id_31169/book.asp (accessed December 29, 2009)

$(document).ready(function() {
    $("form").keypress(function(e) {
        switch(e.target.className) {
            case "numerical":
                if (e.key.match(/[^0-9]/g)) {
                    e.preventDefault();
                }
                break;

            case "email":
                // The following regular expression matches all characters not
                // permitted within an email address
                if (e.key.match(/[^a-zA-Z0-9@!#$%&'*+-\/=?^_{}~.]+/g)) {
                    e.preventDefault();
                }
                break;
        }
    });
});

edit: modified the above in order to work properly with jQuery's events