0

I am an absolute newb to Javascript so my apologies. I have got an autocomplete script adapted and working, but when I click elsewhere on the screen or tab away from the input field, the results list doesn't go away. I have been trying different approaches for hours with no luck.

function findCustomer(thevalue, e) {
if (thevalue.length > 1) {
theObject = document.getElementById("autocompletediv");
theObject.style.visibility = "visible";
theObject.style.width = "152px";
var posx = 0;
var posy = 0;
posx = (findPosX (document.getElementById("surname")) +200);
posy = (findPosY (document.getElementById("surname")) +0);
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
var theextrachar = e.which;
if (theextrachar == undefined){
    theextrachar = e.keyCode;
}
var objID = "autocompletediv";
    if (thevalue.length == 1) {
        var serverPage = "findcustomer.php";
    } else {
        var serverPage = "findcustomer.php" + "?sn=" + thevalue.substr (0, (thevalue.length));
    }
var obj = document.getElementById(objID);
var request = new XMLHttpRequest(); 
request.open("GET", serverPage);
request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
        obj.innerHTML = request.responseText;
        }
    }
request.send(null);
} else {    
theObject.style.visibility = "hidden";
}

}

This works, shows the div when 2 characters or more entered, hides when 1 or no characters entered.

I thought an onBlur should work so I have tried the following:

 <td><input name="surname" type="text" class="short" id="surname" autocomplete="off" onKeyUp="findCustomer(this.value, event)" onBlur="hideDiv()" /></td>

And the function:

function hideDiv() {
document.getElementById('autocompletediv').style.visibility = "hidden";

}

I'm sure it's blatently obvious where I'm going wrong to most of you...

Dave
  • 9
  • 2
  • Looks logical to me. – Praveen Kumar Purushothaman Nov 29 '16 at 14:06
  • Just tried now, no change. I don't yet understand the preferred capitalization of javascript. – Dave Nov 29 '16 at 14:11
  • LoL. Seriously? Are you blurring on a div? – Praveen Kumar Purushothaman Nov 29 '16 at 14:14
  • not all people know that or remember that, no need for those comments here – Yan Mayatskiy Nov 29 '16 at 14:16
  • I did say that I am very amateur.. The "surname" input field is not in a div. The popup results list is. Does this still apply? – Dave Nov 29 '16 at 14:19
  • Have you checked the console log for errors? You could use `style.display="none"` to hide an element and `style.display="block"` to show it again. Using `visibility:hidden` will take up space on the page. The onblur (or onBlur) event in INPUT element looks ok (HTML attributes are not case sensitive). May be you are forgetting something that is out of this code. – F.Igor Nov 29 '16 at 14:20
  • i was mistaken by the function name, and was sure you are doing onblur on a div, my bad. this code should work, console.log in the hideDiv function to see if the function get called, if it is, then style.visibility is not working like it should. – Yan Mayatskiy Nov 29 '16 at 14:22
  • Thankyou for the console log pointer, I hadn't even looked. For some reason my hideDiv function couldn't be found. I have refreshed and sorted that out. Now it works, but there is a new problem. When I click on a result in the list, the div goes away and the form doesn't auto-fill. It seems the onblur is executing before the autocomplete can execute. – Dave Nov 29 '16 at 14:43
  • @Dave you should add e.preventDefault() when the element is clicked or try e.stopPropagation(), it will stop the events – Yan Mayatskiy Dec 01 '16 at 05:52

0 Answers0