Question

我试图从搜索栏中获取用户输入并在用户按Enter或搜索按钮后显示结果。例如，用户输入输入并按下搜索按钮。然后，页面按名称搜索显示文档。我怎么能这样做？

P.S。我已经把过滤作为一个例子，但我不知道为什么我在搜索栏上挣扎。

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过滤器功能（完全可行的示例），用于选择和按输入搜索

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

额外信息：“显示文档”按钮，按下时显示所有文档。

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

Answer 2

您可以说：document.getElementById(id).value; id是您的id

Javascript：如何从搜索栏中获取输入？

2 个答案: