(原生js)根据标题或者昵称进行模糊查询，后端判断逻辑，前端渲染显示toast提示。后端未给接口的情况）

本文链接：https://blog.youkuaiyun.com/Joy_nn/article/details/128328901

本文详细介绍了如何使用原生JavaScript实现网页搜索功能，包括不同情况下的提示信息封装、搜索方法编写及HTML结构设计等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js部分

1、Toast提示信息公共提示封装部分

//公用提示
function ttoast(text) {
    $("#ttoast").fadeIn().find('.ttoast-text').text(text);

    setTimeout(function () {
        $("#ttoast").fadeOut();
    }, 3000);
};

2、搜索方法search( )

// 搜索
function search() {
    let keyWords = $("#val").val();
    let searchType = $("#searchType").val();
    let list = [];
    if (!keyWords) {
        ttoast('请输入搜索内容！');
        return false;
    }
    dataList.map((item) => {
        if (searchType == '0') {
            if (item.title.includes(keyWords)) {
                list.push(item)
            }
        } else {
            if (item.author.includes(keyWords)) {
                list.push(item)
            }
        }
    });
    if (list.length) {
        setHtml(list);
        $('#button-back').slideDown();
    } else {
        ttoast('暂无搜索内容！');
    }
}

html部分

1、整个搜索的html部分,在搜索按钮上绑定onclick = "search()"事件,

  <div class="search">
    <div>
      <!-- 下拉菜单 -->
      <div class="dropdown">
        <select id="searchType" style="font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px 0px 0px 5px;
          background-color: rgb(69, 82, 194);
          color: white;
          width: 100%;
          height: 100%;">
          <option value="0" selected>按标题</option>
          <option value="1" style="width: 20px;">按昵称</option>
        </select>
      </div>
      <!-- 搜索 -->
      <div class="input-group">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
          viewBox="0 0 16 16">
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
        <input type="text" id="val" placeholder="请输入需要您搜索的内容" aria-label="Recipient's username"
          aria-describedby="button-addon2">
      </div>
      <!-- 搜索按钮 -->
      <div class="searchBtn">
        <button type="button" id="button-addon2" onclick="search()">搜索</button>
      </div>
    </div>
  </div>

1、下拉菜单部分用原生写给搜索类型绑定id，根据不同的内容进行搜索。

<!-- 下拉菜单 -->
      <div class="dropdown">
        <select id="searchType" style="font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px 0px 0px 5px;
          background-color: rgb(69, 82, 194);
          color: white;
          width: 100%;
          height: 100%;">
          <option value="0" selected>按标题</option>
          <option value="1" style="width: 20px;">按昵称</option>
        </select>
      </div>

2、为输入框绑定id

  <!-- 搜索 -->
      <div class="input-group">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
          viewBox="0 0 16 16">
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
        <input type="text" id="val" placeholder="请输入需要您搜索的内容" aria-label="Recipient's username"
          aria-describedby="button-addon2">
      </div>

3、给搜索按钮绑定search（）事件

 <!-- 搜索按钮 -->
      <div class="searchBtn">
        <button type="button" id="button-addon2" onclick="search()">搜索</button>
      </div>