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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions