Skip to content

Improve search UX: Use 'input' event instead of 'keyup' to support pasting #52

@zfjoy520

Description

@zfjoy520

Description

Currently, the search function in the documentation uses the keyup event listener. This creates a usability issue where the search is not triggered immediately when a user pastes text into the search box (e.g., using the mouse context menu or Ctrl+V before releasing the key). The user has to press a physical key to trigger the search after pasting.

Proposed Solution

I suggest switching from the keyup event to the input event. The input event fires synchronously whenever the value of the element is changed, covering typing, pasting, drag-and-drop, and other input methods.

Code Example

In search_index.js (or the relevant JS file), the enableSearch function can be updated as follows:

Current implementation:

function enableSearch() {
$('#search input').keyup(function(event) {
if (ignoredKeyPress(event)) return;
if (this.value === "") {
clearSearch();
} else {
performSearch(this.value);
}
});
$('#full_list').after("<div id='noresults' role='status' style='display: none'></div>");
}

Proposed implementation:

 function enableSearch() { 
   $('#search input').on('input', function(event) { 
     if (ignoredKeyPress(event)) return; 
     if (this.value === "") { 
       clearSearch(); 
     } else { 
       performSearch(this.value); 
     } 
   }); 
  
   $('#full_list').after("<div id='noresults' role='status' style='display: none'></div>"); 
 } 

Benefits

  • Improves User Experience by supporting "Paste and Go".

  • More robust handling of input methods.

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions