0

So, I'm making a custom javascript autocomplete search box using ajax and I'm kinda stuck. I'm using the results of the ajax response to populate an ul and that's all working great. The problem is when I try to change the class of the li element on mouseover. I'm passing the this keyword to the function call but it's actually referencing the xmlHttp object not the li. So my question is how do I reference the li in this case? I've searched for the solution but came up with nothing and since I'm still new to javascript thought I ask my first question and get help from you fine people. Here is the code:

request = new ajaxRequest()
// Calling the ajax_DB.php script
request.open("POST", "ajax_DB.php", true)
// Setting the headers
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
request.setRequestHeader("Content-length", input.length)
request.setRequestHeader("Connection", "close")

request.send(input)
// On successfull server response display the data 
request.onreadystatechange = function(event) 
{
    if (this.readyState == 4) 
    {
        if (this.status == 200) 
        {
            if (this.responseText != null) 
            {   
                // Display results if they are hidden
                display.style.display = 'block';
                // If there are results
                if (display.firstChild !== undefined) 
                {
                    // Remove them
                    while(display.firstChild)
                    {
                        display.removeChild(display.firstChild)
                    }
                }
                    // Convert the string result to an array
                    var results = this.responseText.split(',');
                    // Remove last element from the array(',')
                    results.pop();
                    // Append one 'li' element for each array element
                    for (var i = 0; i < results.length; i++) 
                    {
                        var li = document.createElement('li')
                        li.setAttribute("onclick", "setInputVal(this.innerHTML)")
                        li.setAttribute("onmouseover", setClassOnMouseOver(this))
                        li.innerHTML = results[i]
                        display.appendChild(li)
                    }   
            }
            else alert("Ajax error: No data received")
        }
        else alert("Ajax error: " + this.statusText)
    }

}
Shan_doo
  • 1
  • 3
    Do not use `li.setAttribute` to add events. That is what `addEventListsner` is for. – epascarello Nov 28 '16 at 14:21
  • if you set this attribute to your mouse over function you'll never get the element inside it, call it without assigning this parameter – LellisMoon Nov 28 '16 at 14:22
  • Is there a reason you are calling setClassOnMouseOver instead of setting it as a reference? – epascarello Nov 28 '16 at 14:22
  • You could just put quotes around `setClassOnMouseOver(this)`, since setAttribute would take a string, at the moment you are passing a result of calling setClassOnMouseOver(this) – YemSalat Nov 28 '16 at 14:26
  • 1
    @YemSalat Just realized that I previously did use a string for the setAttribute and it sure works. But like epascarello pointed doing it that way is bad practice so I rewrote it using addEventListener and it works like a charm. Appreciate the help guys. – Shan_doo Nov 28 '16 at 15:34

0 Answers0