Javascript: Comment prendre les entrées de la barre de recherche?

Question

J'essaie de prendre l'entrée de l'utilisateur à partir de la barre de recherche et d'afficher les résultats après que l'utilisateur appuie sur Entrée ou sur le bouton de recherche. Par exemple, un utilisateur entre une entrée et appuie sur le bouton de recherche. Ensuite, la page affiche les documents par nom recherché. Comment puis-je faire cela?

P.S. J'ai déjà fait du filtrage à titre d'exemple, mais je ne sais pas pourquoi je me bats avec une barre de recherche.

HTML

 <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
      <input text="text" id='searchQuery' class="form-control" placeholder="Search" size="60"> 
      </div> 
      <button type="submit" id='searchButton' class="btn btn-default" aria-label="Submit"> 
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
      </button> 
     </form> 

Javascript filtre fonction (exemple entièrement) qui prend une sélection et les recherches par l'entrée

function addDocumentFilterAsData (option, value, element) { 
    switch (option) { 
    case 'name': 
    element.data('filter', function (doc) { 
     return doc.getName().includes(value); 
    }); 
    break 
    case 'owner': 
    element.data('filter', function (doc) { 
     return doc.getOwners().has(value); 
    }); 
    break; 
    case 'tag': 
    element.data('filter', function (doc) { 
     return doc.getTags().has(value); 
    }); 
    break; 
    case 'date': 
    element.data('filter', function (doc) { 
     return doc.getUploadDate().toDateString().includes(value); 
    }); 
    break; 
    default: 
    console.error('Unknown filter option:', criterion.val()); 
    } 
} 

//For filtering documents, on view documents page 
function generateDocumentFilterItem (pane, filterList) { 
    let filterItem = $('<li/>'); 
    let criterion = $('<select/>') 
     .append($('<option/>').text('name')) 
     .append($('<option/>').text('owner')) 
     .append($('<option/>').text('tag')) 
     .append($('<option/>').text('date')); 
    let pattern = $('<input/>', { type: 'text' }); 

    //button to add a filter 
    let addFilterButton = $('<button/>', { 
    type: 'button', 
    click: function() { 
     addDocumentFilterAsData(criterion.val(), pattern.val(), filterItem); 
     addFilterButton.detach(); 
     filterItem.append(updateFilterButton); 
     filterItem.after(generateDocumentFilterItem(pane, filterList)); 
     refreshDocumentList(pane, filterList); 
    } 
    }); 

    addFilterButton.append('<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>'); 

    //button to update an already added filter 
    let updateFilterButton = $('<button/>', { 
    type: 'button', 
    click: function() { 
     addDocumentFilterAsData(criterion.val(), pattern.val(), filterItem); 
     refreshDocumentList(pane, filterList); 
    } 
    }); 

    updateFilterButton.append('<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>'); 

    filterItem.append(criterion).append(pattern).append(addFilterButton); 
    criterion.before(''); 
    criterion.after(''); 
    return filterItem; 
} 

Extra info: bouton 'Afficher les documents' qui affiche tous les documents lorsqu'ils sont pressés.

$('#listDocumentsButton').click(function() { 

    let listDocumentsPane = $('#listDocumentsPane'); 
    listDocumentsPane.empty().show().siblings().hide(); 

    let filterList = $('<ol/>', { 
     'class': 'document-filter-list' 
    }).appendTo(listDocumentsPane); 

    let documentListPane = $('<div/>', { 
     'class': 'document-list-pane' 
    }).appendTo(listDocumentsPane); 

    filterList.append(generateDocumentFilterItem(documentListPane, filterList)); 
    refreshDocumentList(documentListPane, filterList); 
    $('#tagsMain').children().empty(); 
    }); 

Answer 1

Puisque vous utilisez JQuery dans vos méthodes, vous pouvez simplement utiliser

$('#searchQuery').val(); 

ou l'assigner à une variable et peut-être l'utiliser au lieu de la valeur dans votre filtre

var value = $('#searchQuery').val();