Javascript：検索バーからの入力方法

Question

私は検索バーからユーザー入力を受け取り、ユーザーが入力または検索ボタンを押した後に結果を表示しようとしています。例えば、ユーザは入力を入力し、検索ボタンを押す。その後、ページには検索された名前で文書が表示されます。どうすればいいですか？

P.S.私はすでに例としてフィルタリングを行ってきましたが、なぜ私が検索バーに苦労しているのか分かりません。押されたときにすべての文書を表示する「表示ドキュメント」ボタン：入力により

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; 
} 

余分な情報を選択して検索をとり

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のフィルタ機能（完全実施例）。

$('#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

あなたの方法ではJQueryを使用しているので、あなただけの

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

を使用することができますか、それを変数に割り当てると、おそらくあなたのフィルタに値の代わりに使用

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