哪個事件用於搜索輸入

我有一個搜索字段，收集查詢並使用AJAX請求執行搜索。我無法找到完美的JavaScript事件來執行搜索。哪個事件用於搜索輸入

oninput 使用oninput，AJAX請求被觸發多次，一旦在輸入字段中的每個字符。因此搜索 '123' 將執行三個AJAX請求：

'1'
'12'
'123'

平變化 使用平變化是在更高效它只會觸發一個AJAX請求，但它會強制用戶從搜索字段更改焦點以觸發。

是否有一個JavaScript事件，我可以使用兩全其美？我在搜索時使用了1.5秒的超時延遲，以便用戶有足夠的時間輸入搜索查詢。理想情況下，我想使用一個類似於的JS事件，輸入，不需要該字段失去焦點就會觸發，但只對整個值觸發一次，而不是輸入字段中的每個字符觸發一次。

也許答案是使用onchange事件並在1.5秒後自動失去焦點？這看起來很詭異，同時也引入了一個可用性問題，因爲如果用戶想要更改搜索查詢，他們需要重新設置搜索字段的焦點。

來源

2016-05-30 Jeff Walden

您應該使用此處理程序中的超時來反彈輸入事件 –

我們使用https://github.com/AOEpeople/deferred-event-callback進行去除，您可能需要試一試。 –

你應該使用'keypress'事件，看看這個答案關於「debouncing」與池ajax請求=> http://stackoverflow.com/questions/37105255/how-to-resolve-race-conditions-on-debounced -user-input/37154887＃37154887 –

這是你如何能做到這一點，去抖動input事件：

$('input[type=search]').on('input', function(){ 
    clearTimeout(this.delay); 
    this.delay = setTimeout(function(){ 
     console.log(this.value); 
     /* call ajax request here */ 
    }.bind(this), 800); 
});

和更好地UIX，你應該綁定search事件太：

$('input[type=search]').on('search', function(){ 
    if(this.value){ 
    /* call ajax request here */ 
    } 
});

見-DEMO-

來源

2016-05-30 14:18:01

我會當用戶點擊輸入時，建議運行一個電話。當你寫完單詞時，點擊輸入似乎很自然。

當用戶點擊進入一些數據到searchBox後，該代碼運行doYourStuff（）。

$("#searchBox").keyup(function (event) { 
     if (event.keyCode == 13) { 
      doYourStuff(); 
     }

如果你不喜歡，你可以始終與一些奇特的搜索圖標添加一個小按鈕，並調用運行，當用戶點擊這個按鈕的解決方案。

來源

2016-05-30 14:23:17 Marta

哪個事件用於搜索輸入

回答

相關問題