JavaScript功能太快

我是JavaScript新手，我試圖做一個搜索功能，以少量的數據。JavaScript功能太快

我的下一個HTML代碼：

<form name="f1"> 
    <input type="text" name="sbox" onkeydown=keysearch(event)> 
    <button type="button" onclick=search()></button> 
</form>

而接下來的JavaScript來實現去功能（它可以隱藏所有的塊，然後做可見他們中的一些，在比較他們的文字（上）和文本搜索框）：

function search() { 
word = f1.sbox.value.toLowerCase() 

v = document.getElementsByClassName('item') 
for(i=0; i<v.length; ++i) { 
    v[i].style.display = 'none' 

    s1 = i.toString() 
    if(document.getElementById(s1).innerHTML.toLowerCase().indexOf(word) != -1) { 
     s2 = s1 + "b"; 
     document.getElementById(s2).style.display = 'block' 
    } 
} 
}

要應用的元素這樣的：

<div id="items"> 
    <article id="0b" class="item"> 
     <h3><a id="0" href="http://www.example.com/">Example</a></h3> 
     <img src="example.jpg"> 
    </article> 
(...) 
</div><!-- end items -->

所以，一這是正確的。問題是當我嘗試添加另一個功能以允許用戶使用de Enter鍵時，不僅使用鼠標點擊使用搜索框。這是我的代碼：

function keysearch(e) { 
    var charCode 

    if(e && e.which) { 
     charCode = e.which 
    } else if(window.event) { 
     e = window.event 
     charCode = e.keyCode 
    } 

    if(charCode == 13) { 
     search() // call the function above 
    } 
}

我有某種問題，我找不到。事實上，第二個函數也可以工作，但速度太快了，所以我可以看到它的結果不到一秒鐘，然後所有事情都回到原來的位置。

請...有關它的一些想法？

非常感謝。 PS：在此之前，我會爲此搜索框執行「即時搜索」，所以如果您有一些想法...再次感謝您。

來源

2013-02-19 DanielM

不知道你的問題，但你可以通過跟蹤功能的console.log調用你的代碼的進展。它確實有助於快速調試。 – 2013-02-19 08:14:07

所以你想讓'自動完成'功能在keydown延遲一段時間後工作？ – cwdoh 2013-02-19 08:21:52

再次加載您的頁面之類的聲音。至少IE會在'input：text'上按'ENTER'時提交一個'form'。爲了防止出現這種情況，您需要防止默認操作，該操作在（舊）IE中由'event.cancelBubble = true; event.returnValue = false;'。 – Teemu 2013-02-19 08:27:03

var keycheckTimeout; 
function keysearch(e) { 
    var charCode 

    if(e && e.which) { 
     charCode = e.which 
    } else if(window.event) { 
     e = window.event 
     charCode = e.keyCode 
    } 

    if(charCode == 13) { 
     clearTimeout(keycheckTimeout); 
     keycheckTimeout = setTimeout(function() { search(); }, 1000); 
    } 
}

來源

2013-02-19 08:26:27 cwdoh

我試過你的代碼，它似乎工作，但有一個例外。當您在輸入字段中按回車鍵，且鍵碼13被註冊時，您也會調用表單的默認操作。這是用http請求發佈表單。所以你的頁面會重新加載，使你的JavaScript無用。它會彈出一秒鐘。然後在重新加載時消失。

嘗試在您提交的表單中返回false，就像這樣。

<form name="f1" onsubmit="return false;">

這是一個非常簡單的方法來防止它，它仍然可以在禁用JavaScript的情況下工作，因爲實際操作將會運行。

如果您有興趣，還可以使用jQuery來做到這一點。

http://api.jquery.com/event.preventDefault/

來源

2013-02-19 08:29:27

非常感謝！現在，它工作正常！ :) – DanielM 2013-02-19 09:42:21

請標記爲已回答。 :) – 2013-02-19 11:32:23

甲形式不正確地形成而不被設置其動作。在某些瀏覽器中，如果你錯過了這個選項，那麼按下回車鍵會刷新頁面。這是發生在你的情況。

變化

<form name="f1">

到

<form name="f1" action="javascript:void(0);">

另見本stackoverflow answer

來源

2013-02-19 09:25:11 jing3142

你的解決方案也可以，也可以在其他答案上添加onKeyPress =「if（event.which == 13）return false;」）謝謝;） – DanielM 2013-02-19 14:01:01

JavaScript功能太快

回答

相關問題