Onblur overriding onclick - can't figure out how to make it work

[linus72982]

I have an "offer suggestions" script attached to an input text element.  The text box has an onblur that changes the visibility of the suggestions div to display:none and then an onclick of each suggestion div in the main suggestion div that is supposed to fill the textbox with its value.  Fairly standard functionality for an offer suggestion script I would think, the problem is that the onblur of the textbox hides the suggestion div before the onclick of one of its child divs can fire and fill the textbox making the onclick meaningless.  How would I get around this?  I tried doing it with a timer delaying the disappearance of the div for a few milliseconds, but then it just waits and the onclick doesn't fire in the meantime as the script is held up.

 

Then I got into some janky code whereby I put in a dummy div that was display:none and changed its value when the user mouses over one of the suggestion divs and to change it back to default when they mouseout, then added a line to the onblur of the textbox to check the value of the dummy div and essentially check whether or not the onblue click came from a click on a suggestion div, it it did, it would call the fill textbox function first and then return to disappear the suggestion div, if it didn't, it would just disappear the suggestion div.  Janky as all hell and didn't work anyway - so...

 

Does anyone have any suggestions?  Here's the relevant parts of the code if you need it:

 

This is the input textbox and the suggestion div:

 

<input type="text" name="pmTo" id="pmTo" onkeyup="offerSuggs('none');" onfocus="showSelect();" onblur="hideSelect();" />
			<div name="nameSugg" id="nameSugg" style="display:none;">

 

This is the individual suggestion child divs that the ajax call puts in the suggestion div based on user input (they're created from a PHP script that the ajax calls):

 

$suggString .= '<div name="'.$value.'" id="'.$value.'" class="suggMouseOver" onmouseover="highlightDivs(this);" onmouseout="blurDivs(this);" onclick="fillInput(this);">'.$value.'</div>';

 

And then finally the functions that handle the events regarding the textbox and the suggestion divs:

 

function showSelect() {
			document.getElementById('nameSugg').style.display="block";
			offerSuggs('none');
			}
		function hideSelect() {
			offerSuggs('checkFinal');
			document.getElementById('nameSugg').style.display='none';
			}
		function highlightDivs(elemName) {
			document.getElementById(elemName.id).style.backgroundColor="#FFFF00";
			}
		function blurDivs(elemName) {
			document.getElementById(elemName.id).style.backgroundColor="#FFFFFF";
			}
		function fillInput(elemName) {
			document.getElementById('pmTo').value=elemName.id;
			offerSuggs('checkFinal');
			}

[linus72982]

Fixed it, thanks.

[Adam]

You're welcome