Событие с кликом мыши не работает для предложений автозаполнения

Question

Я использую автозаполнение в окне поиска. Все работает правильно, за исключением того, что событие щелчка мыши не работает, если вы используете мышь для выбора предложения вместо использования стрелок вверх или вниз. В редких случаях, когда страница сначала загружается, она будет работать один раз, но никогда больше. Не уверен, что я делаю неправильно.

Тестовая страница находится по адресу http://www.candyundies.com/template_non_product.php

Вот содержание 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

не DIVS массив?

Вы не можете переопределить событие UI для массива, его не существует. Если я синтаксически отсутствует что-то здесь.

Try итерация и добавить событие

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