Question

I am using an autocomplete on my search box. Everything is working properly, except that the mouse click event doesn’t work if you use the mouse to select suggestion instead of using up or down arrows. On rare occasions when the page is first loaded it will work once but never again. Not sure what I’m doing wrong.

Test page is located at http://www.candyundies.com/template_non_product.php

Here is the contents of autocomplete.js:

// global variables
var acListTotal   =  0;
var acListCurrent = -1;
var acDelay       = 100;
var acURL         = null;
var acSearchId    = null;
var acResultsId   = null;
var acSearchField = null;
var acResultsDiv  = null;
function setAutoComplete(field_id, results_id, get_url) {
// initialize vars
acSearchId  = "#" + field_id;
acResultsId = "#" + results_id;
acURL       = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField   = $(acSearchId);
acResultsDiv    = $(acResultsId);
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 100) });
// on key up listener
acSearchField.keyup(function (e) {
    // get keyCode (window.event is for IE)
    var keyCode = e.keyCode || window.event.keyCode;
    var lastVal = acSearchField.val();
    // check an treat up and down arrows
    if(updownArrow(keyCode)){
        return;
    }
    // check for an ENTER or ESC
    if(keyCode == 13 || keyCode == 27){
        clearAutoComplete();
        return;
    }
    // if is text, call with delay
    setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
// treat the auto-complete action (delayed function)
function autoComplete(lastValue) {
// get the field value
var part = acSearchField.val();
// if it's empty clear the resuts box and return
if(part == ''){
    clearAutoComplete();
    return;
}
// if it's equal the value from the time of the call, allow
if(lastValue != part){
    return;
}
// get remote data as JSON
$.getJSON(acURL + part, function(json){
    // get the total of results
    var ansLength = acListTotal = json.length;
    // if there are results populate the results div
    if(ansLength > 0){
        var newData = '';
        // create a div for each result
        for(i=0; i < ansLength; i++) {
            newData += '<div class="unselected">' + json[i] + '</div>';
        }
        // update the results div
        acResultsDiv.html(newData);
        acResultsDiv.css("display","block");
        // for all divs in results
        var divs = $(acResultsId + " > div");
        // on mouse over clean previous selected and set a new one
        divs.mouseover( function() {
            divs.each(function(){ this.className = "unselected"; });
            this.className = "selected";
        });
        // on click copy the result text to the search field and hide
        divs.click( function() {
            acSearchField.val(this.childNodes[0].nodeValue);
            clearAutoComplete();
        });
    } else {
        clearAutoComplete();
    }
});
}
// clear auto complete box
function clearAutoComplete() {
acResultsDiv.html('');
acResultsDiv.css("display","none");
}
// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
if(keyCode == 40 || keyCode == 38){
    if(keyCode == 38){ // keyUp
        if(acListCurrent == 0 || acListCurrent == -1){
            acListCurrent = acListTotal-1;
        }else{
            acListCurrent--;
        }
    } else { // keyDown
        if(acListCurrent == acListTotal-1){
            acListCurrent = 0;
        }else {
            acListCurrent++;
        }
    }
    // loop through each result div applying the correct style
    acResultsDiv.children().each(function(i){
        if(i == acListCurrent){
            acSearchField.val(this.childNodes[0].nodeValue);
            this.className = "selected";
        } else {
            this.className = "unselected";
        }
    });
    return true;
} else {
    // reset
    acListCurrent = -1;
    return false;
}
}

Answer 1

isn’t divs an array?

you can’t override a UI event for an array, it doesn’t exist. Unless i’m syntactually missing something here.

Try iterating and adding the event

 for( var i 0; i < divs.length;i++)
       divs[i].onclick = ...