<div class="search"> <form action="https://www.baidu.com/s?wd=" class="sui-form form-inline"> <!--searchAutoComplete--> <div class="input-append"> <input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" /> <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button> </div> </form> </div>补全此代码实现搜索按钮的跳转功能
时间: 2023-10-19 13:05:36 浏览: 130
<div class="top">我的网页设计作业</div>
当点击搜索按钮时,应该使用JavaScript获取输入框的值,并将其作为搜索关键词添加到URL中,然后跳转到该URL。
以下是一个示例代码:
```html
<div class="search">
<form action="https://www.baidu.com/s?wd=" class="sui-form form-inline">
<!--searchAutoComplete-->
<div class="input-append">
<input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" />
<button class="sui-btn btn-xlarge btn-danger" type="button" onclick="search()">搜索</button>
</div>
</form>
</div>
<script>
function search() {
var input = document.getElementById("autocomplete");
var keyword = input.value;
var url = "https://www.baidu.com/s?wd=" + encodeURIComponent(keyword);
window.location.href = url;
}
</script>
```
在这个示例中,我们在按钮上添加了一个`onclick`属性,绑定了一个名为`search()`的JavaScript函数。当按钮被点击时,该函数会被调用。
在函数中,我们首先使用`document.getElementById()`方法获取输入框的值。然后,使用`encodeURIComponent()`方法对搜索关键词进行编码,以便在URL中使用。最后,使用`window.location.href`将页面跳转到拼接好的URL。
阅读全文