html搜索框跳转搜索页面
时间: 2023-08-07 07:05:53 浏览: 525
要实现一个HTML搜索框,并且点击搜索按钮后跳转到搜索结果页面,可以使用HTML表单元素和JavaScript。首先,在HTML中定义一个表单元素,包含输入框和搜索按钮:
```
<form action="search.html">
<input type="text" name="query" placeholder="请输入搜索关键词">
<button type="submit">搜索</button>
</form>
```
这里的 `action` 属性指定了表单提交后跳转到的页面,这里是 `search.html`。输入框的名称为 `query`,这个名称将用于从搜索结果页面获取搜索关键词。
接下来,在搜索结果页面(`search.html`)中,使用JavaScript获取表单提交时传递的搜索关键词,并进行相应的处理。可以使用以下代码:
```
<script>
// 获取 URL 中的参数(搜索关键词)
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// 获取搜索关键词
var query = getParameterByName('query');
// 处理搜索关键词
if (query) {
// TODO: 进行搜索并显示结果
}
</script>
```
这里的 `getParameterByName` 函数可以从URL中获取指定名称的参数值,也就是搜索关键词。然后,可以根据搜索关键词进行相应的搜索操作,并将结果显示在页面上。
需要注意的是,这只是一个简单的搜索框实现,实际的搜索功能可能需要更复杂的处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)