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;
}
}
答案 0 :(得分:0)
我明白了。问题出在每次调用的AJAX方法中并更新了表。 我添加了函数update_search_offer()下一个代码:
else if ((event.keyCode == 38) || (event.keyCode == 40))
{
// do nothing
}
因此,如果按下向上或向下,它不会更新字段。对不起,打扰了你。