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事件，它不存在。除非我在语法上遗漏了一些东西。

尝试迭代并添加事件

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

鼠标单击事件不适用于自动填充建议

1 个答案: