Question

I want to execute a jquery script that will fade a <label for='username'> after someone selects an entry from stored input values given by the browser (the values that are given when autocomplete=’on’) from the <input name='username' type='text'> element.

Is there any way to check if user picked a selection from a stored input values ??

.. I already though of an ugly solution to this when i check if text input is empty whenever user presses a key or mouse button but i would like a nicer solution

Update:
I found out that the solution i had in mind doesnt actually work –but here is the pseudocode anyways:

$(document).ready(function(){
mouseup(function(){
  if(!isWhitespace($("#username")){
   //blur the label
  }
 //same function for keyup() 
  function isWhitespace(elem){
           $elemCont = elem.val().replace(/^\s+/, '').replace(/\s+$/, '');
                            if ($elemCont === '') {
                                // element contained all whitespace
                                elem.val('');
                                return true;
                            }else{
                                // element has real content
                                elem.val($elemCont); //free element of leading/trailing whitespace  
                                return false; 
                            }
       }
}

}

Answer 1

I figured out how to do it in a semi nice manner.
because the list of stored input values that appears is not part of $(document) and i couldnt find the name for the element (i dont think it has a name you can just turn it off with autocoplete="off") it was challenging but possible.
I simply made a function that executes every time you hover in to the document

$(document).hover(function() {

if(!isWhitespace($("#inputId")){
//blur label
}


},function(){});  

This works
even when you move your mouse out of the browser and use the keyboard to select an item from the stored value list.

If anybody finds a better solution feel free to respond