Question

Helo，

我正在构建一个搜索框，它将提供选择并使用箭头进行导航。它适用于alert（），但如果删除了警报，它会突出显示（=更改背景属性）然后dehightlight。在调试器中，它工作正常。我怀疑有太多的事件捕获。有什么问题。

警告必须在此功能中：

function ChangeCurrentCell() 
{   
        //alert('Row' + currentRow);
        var tableID = document.getElementById("seach_table");
        var tableRow = tableID.getElementsByTagName("tr");
        var cellToLight;

        //checking rows
        total_rows = tableRow.length;
        //alert('Total'+total_rows);
        if (currentRow<0)
        {
            currentRow=0;
        }
        if (currentRow>=total_rows)
        {
            currentRow=total_rows-1;
        }
        // clear everything
        for (var i=0; i < total_rows; i++)
        {
            tableRow = tableID.getElementsByTagName("tr")[i];
            cellToLight = tableRow.getElementsByTagName("td")[0];
            tableRow.style.backgroundColor = "#FFF";
        }

        //hightlight required
        tableID = document.getElementById("seach_table");
        tableRow = tableID.getElementsByTagName("tr")[currentRow];
        cellToLight = tableRow.getElementsByTagName("td")[0];
        tableRow.style.backgroundColor = "#aaa";
    }

HTML：

<input type='edit' id='text_to_search' name='text_to_search' autocomplete="off" value='' 
                                    size='25' onkeyup='return update_search_offer(event);' onkeypress="return check_for_enter_code(event);" onkeydown="return navigate(event);">

完整的JavaScript：

function update_search_offer(event)
{
    if (event.keyCode == 27)
    {
        //alert('Hide');
        document.getElementById("text_offer").style.visibility='hidden';

    }
    else
    {
        document.getElementById("text_offer").style.visibility='visible';   
        if (document.getElementById("text_to_search").value == '')
        {
            document.getElementById("text_offer").style.display = "none";

        }
        else
        {
            document.getElementById("text_offer").style.display = "block";
            var word_search = ""+document.getElementById("text_to_search").value;
            $.post("_lookup.php", { query: word_search }).done(function(data) {

                        document.getElementById("seach_table").innerHTML = data;
                        if (data == '')
                        {
                            document.getElementById("text_offer").style.display = "none";
                        }
                });
        }
    }
}

function offer_selected(selection)
{
    document.getElementById("text_to_search").value =selection; 
    document.getElementById("search_button").click();
}

function check_for_enter_code(e)
{
    //alert('Call');
    e = e || window.event;
    if (e.keyCode == 13)
    {
        if (document.getElementById("text_to_search").value == '')
            return false;
        else return true;
    }
    else
        return true;
}

var currentRow = 0;
var total_rows=0;
function ChangeCurrentCell() 
{   
        //alert('Row' + currentRow);
        var tableID = document.getElementById("seach_table");
        var tableRow = tableID.getElementsByTagName("tr");
        var cellToLight;

        //checking rows
        total_rows = tableRow.length;
        //alert('Total'+total_rows);
        if (currentRow<0)
        {
            currentRow=0;
        }
        if (currentRow>=total_rows)
        {
            currentRow=total_rows-1;
        }
        // clear everything
        for (var i=0; i < total_rows; i++)
        {
            tableRow = tableID.getElementsByTagName("tr")[i];
            cellToLight = tableRow.getElementsByTagName("td")[0];
            tableRow.style.backgroundColor = "#FFF";
        }

        //hightlight required
        tableID = document.getElementById("seach_table");
        tableRow = tableID.getElementsByTagName("tr")[currentRow];
        cellToLight = tableRow.getElementsByTagName("td")[0];
        tableRow.style.backgroundColor = "#aaa";
    }

function navigate(event)
{
    if(event.keyCode == 38) //up arrow
    {
        currentRow--;
        ChangeCurrentCell();
        return false;
    }
    else if(event.keyCode == 40) //40 - down arrow
    {
        currentRow++;
        ChangeCurrentCell();
        return false;
    }
}

Answer 1

我明白了。问题出在每次调用的AJAX方法中并更新了表。我添加了函数update_search_offer（）下一个代码：

else if ((event.keyCode == 38) || (event.keyCode == 40))
    {
        // do nothing
    }

因此，如果按下向上或向下，它不会更新字段。对不起，打扰了你。

删除alert（）后，代码表现很奇怪

1 个答案: