Why is Onblur not working (JQuery/Javascript) -
i have following input field want pull suggestions when user types:
<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='settimeout('removesuggestions()', 20);' onkeyup ='getsuggestions(this.value);'/>
there "suggestions" div below , using following javascript.
function getsuggestions(value){ if (value !=""){ $.post("target.php", {targpart:value}, function(data) { $("#suggestions").html(data); if(value.length>2){ docss(); } }); } else { removesuggestions(); } } function removesuggestions(){ $("#suggestions").html(""); undocss(); } function addtext(value){ $("#target").val(value); } function docss(){ $("#suggestions").css({ 'border' : 'solid', 'border-width': '1px' }); } function undocss(){ $("#suggestions").css({ 'border' : '', 'border-width': '' }); }
i figure when click outside field....the suggestions div should vanish or have more explicitly?
thanks!
your problem here:
<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='settimeout('removesuggestions()', 20);' onkeyup ='getsuggestions(this.value);'/>
for reason using single quotes surround attribute values, using surround function call in settimout(). when browser parses it, stops attribute @
onblur ='settimeout('
and js errors.
use double quotes surround html attributes.
<input type = "text" name= "target" id="target" style="width:150px" onblur ="settimeout('removesuggestions()', 20);" onkeyup = "getsuggestions(this.value);"/>
also, that's not best way use settimout(). use anonymous function instead.
also, binding event listeners inline not best practice. instead use unobtrusive javascript.
$(function(){ $('#target').blur(function(e) { settimeout(function(){ removesuggestions() }, 20); }); $('#target').keyup(function(e) { getsuggestions(e.target.value); }); });
hope helps
Comments
Post a Comment