마우스 클릭 이벤트가 자동 완성 제안을 위해 작동하지 않습니다.

Question

내 검색 상자에 자동 완성 기능을 사용하고 있습니다. 위 또는 아래 화살표를 사용하는 대신 마우스를 사용하여 제안을 선택하면 마우스 클릭 이벤트가 작동하지 않는다는 점을 제외하면 모든 것이 올바르게 작동합니다. 페이지가 처음로드 될 때가끔 드물지만 한 번 작동하지만 다시는 작동하지 않습니다. 내가 뭘 잘못하고 있는지 모르겠다.

// 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

배열을 div가되지 않는다 : 여기서의 내용 autocomplete.js

테스트 페이지 http://www.candyundies.com/template_non_product.php

에 위치하고 있는가?

배열에 대한 UI 이벤트를 재정의 할 수 없지만 존재하지 않습니다. 내가 문법적으로 여기서 뭔가를 놓치지 않는 한.

시도를 반복하는 이벤트

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