首页搜索框传递参数，并在搜索页面中的搜索框中进行显示，搜索框绑定回车键进行搜索

本文链接：https://blog.csdn.net/m0_46170663/article/details/132509831

实现搜索条件和搜索内容固定，以及回车键搜索跳转

1.写出搜索条件和搜索框

<form class="parent">
        <select id="searchSelect"  style="border: 1px solid #325da7;border-right: none;" value="resource">
          <option value="resource">资源名称</option>
          <option value="user">作者名称</option>
        </select>
        <input type="text" class="search" placeholder="搜索" id="searchtxt" />
        <input type="button" id="selectBtn" class="btn" />
</form>

2.添加scss样式

.parent {
        margin-top: 10px;
        display: flex;
        flex-wrap: nowrap;

        .search {
          width: 448px;
          height: 36px;
          outline: none;
          border: 1.5px solid #325da7;
        }

        .btn {
          height: 40px;
          width: 60px;
          background: #325da7 url('https://www.ydwenku.com/master/images/searchico.png') center center no-repeat;
          background-size: 35px;
          border: none;
        }
      }

页面
在这里插入图片描述

3.搜索框选择条件，在搜索框中输入内容，然后进行页面跳转

let selectedValue = 'resource';
const searchSelectElement = document.getElementById("searchSelect");  //搜索框条件选择下拉框
const searchInputElement = document.getElementById("searchtxt"); //搜索输入框
const selectBtnElement = document.getElementById("selectBtn"); //搜索按钮
searchSelectElement.addEventListener("change", searchSelect);
searchInputElement.addEventListener("input", handleSearchInput);
searchInputElement.addEventListener("keypress", handleSearchKeyPress);

function handleSearchKeyPress(event) {
  if (event.key === "Enter") {
    event.preventDefault(); // 阻止默认行为
    openSearchPage(searchInputElement.value);
  }
}

function handleSearchInput(event) {
  const searchText = event.target.value;
  selectBtnElement.onclick = function () {
    openSearchPage(searchText);
  };
}
 function openSearchPage(searchText) {
  const url = `/html/searchpage/search.html?searchText=${searchText}&selectSearch=${selectedValue}`;
  window.open(url);
}

在搜索框中输入内容，然后进行页面跳转
在这里插入图片描述

4.页面跳转后从地址栏中获取相关数据，搜索条件和搜索框中的内容

const urlsearch = new URLSearchParams(location.search);
const serchname = urlsearch.get("searchText");  //获取地址栏中传递的参数
const serChange = urlsearch.get("selectSearch");
$('#searchtxt').val(serchname);
$('#searchSelect').val(serChange)

在这里插入图片描述
从地址栏中获取到相关数据searchText和selectSearch的值

$('#searchtxt').val(serchname);  // 搜索框中条件固定
$('#searchSelect').val(serChange) // 搜索框中搜索内容固定

在这里插入图片描述