请在为刚才的搜索框写一段j代码使得搜索框可以输入文字，并实现跳转到目标页面

HTML 代码：

<input type="text" id="search-box">
<button onclick="search()">搜索</button>

JavaScript 代码：

function search() {
  // 获取输入框的值
  const keyword = document.getElementById("search-box").value;
  // 跳转到目标页面
  window.location.href = "https://www.example.com/search?q=" + keyword;
}

上述代码中，我们定义了一个 `search` 函数，当用户点击搜索按钮时会调用该函数。在函数中，我们首先获取搜索框中输入的关键词，然后将其拼接到目标页面的 URL 中，并通过 `window.location.href` 实现页面跳转。需要注意的是，该代码仅为示例，实际应用中需要对用户输入进行安全过滤和验证。

相关问题

vue 搜索框像浏览器搜索一样 给字体标颜色然后点击下一个可以直接精准定位呀

可以通过在搜索框中输入关键字后，通过代码实现对关键字进行标记，然后在页面中实现快速定位功能。具体实现步骤如下：

1. 在搜索框中输入关键字后，获取搜索框中的值。

2. 使用正则表达式匹配页面中的所有匹配项，并将匹配项用 `<span>` 标签包裹起来，并添加样式。

3. 将匹配项的位置记录下来，并绑定到相应的元素上。

4. 实现快速定位功能，点击下一个时，根据记录的位置信息，跳转到下一个匹配项所在的位置。

以下是一个简单的实现示例：

<template>
  <div>
    <input type="text" v-model="searchText" @input="search" placeholder="请输入关键字">
    <div ref="content" :style="{height: contentHeight + 'px', overflow: 'auto'}">
      <div v-html="highlightedContent"></div>
    </div>
    <button @click="goToNextMatch">下一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段需要搜索的文本',
      searchText: '',
      matches: [],
      currentMatch: 0,
    }
  },
  computed: {
    highlightedContent() {
      let content = this.content
      this.matches.forEach(match => {
        content = content.replace(new RegExp(match, 'g'), `<span class="highlight">${match}</span>`)
      })
      return content
    },
    contentHeight() {
      return this.$refs.content ? this.$refs.content.offsetHeight : 0
    },
  },
  methods: {
    search() {
      const regex = new RegExp(this.searchText, 'gi')
      this.matches = []
      let match
      while (match = regex.exec(this.content)) {
        this.matches.push(match[0])
      }
      this.currentMatch = 0
    },
    goToNextMatch() {
      if (this.matches.length === 0) {
        return
      }
      this.currentMatch = (this.currentMatch + 1) % this.matches.length
      const match = this.matches[this.currentMatch]
      const element = document.querySelector(`.highlight:nth-child(${this.currentMatch + 1})`)
      if (element) {
        element.scrollIntoView({behavior: 'smooth', block: 'center'})
      }
    },
  },
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

在上面的示例中，通过使用正则表达式匹配关键字，并将匹配项用 `<span>` 标签包裹起来，实现了对关键字的标记。然后在实现快速定位功能时，通过记录匹配项的位置信息，并使用 `scrollIntoView()` 方法实现了快速定位的功能。

原生js写出搜索框搜索

好的，以下是一个基本的搜索框搜索的实现：

HTML部分：

<div>
  <input type="text" id="search-input" placeholder="请输入关键词">
  <button id="search-btn">搜索</button>
</div>

JS部分：

var searchBtn = document.getElementById('search-btn');
var searchInput = document.getElementById('search-input');

searchBtn.addEventListener('click', function() {
  var keyword = searchInput.value;
  if (keyword) {
    window.location.href = 'https://www.baidu.com/s?wd=' + keyword;
  }
});

这段代码会监听搜索按钮的点击事件，当点击时获取搜索框中输入的关键词，然后将其作为参数拼接到百度搜索的URL后面，最后跳转到搜索结果页。当然，这只是一个简单的实现，实际情况需要考虑更多的因素，比如防止XSS攻击，处理用户输入的特殊字符等。