具有可修改超链接的HTML搜索框
具有可修改超链接的HTML搜索框
提问于 2018-08-04 04:55:02
我想知道有没有可能创建一个HTML搜索框，其中包含一个可由用户输入修改的超链接？例如
<form action="http://websitename.com/search=***the user's input text***">
<input type="text" placeholder="Search.." name="search">
<button type="submit">Search This Website</button>
</form>如果这是可能的，上面的代码是执行这样一个功能的准确方式吗？我知道我需要一些基本的JavaScript，但这可能是什么样子，我需要添加/更改上面的html吗？提前感谢！
编辑这是确切的代码：
<form class="octopart-search">
<input type="text" placeholder="Search Octopart.." name="search" onchange="this.form.action='http://octopart.com/search?q='+this.value;return true;">
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>这是用户输入: 0201X103K250SNT
结果URL如下所示：http://octopart.com/search?search=0201X103K250SNT
当it 应该看起来像这样：http://octopart.com/search?q=0201X103K250SNT
不知何故，搜索“name=”被插入到了“q”应该出现的地方……
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-04 07:14:58
如果您希望浏览器像识别搜索引擎一样识别此操作，请使用type="search"，如下所示：
<form action="http://websitename.com/search">
<input type="search" name="q" placeholder="Search..." name="search">
<button type="submit">Search This Website</button>
</form>
<!-- When a user clicks submit, the link will look like
http://websitename.com/search?q=user_input -->
Stack Overflow用户
发布于 2018-08-04 05:17:47
在大多数情况下，如果您需要将搜索词作为HTTP参数进行传输，您可以直接执行此操作，而无需任何脚本：
<form action="http://websitename.com/search">
<input type="text" placeholder="Search.." name="q">
<button type="submit">Search This Website</button>
</form>行为:只要用户按下submit按钮，浏览器就会跳转到URL=http://websitename.com?search=<user data>。
相反，如果您需要将搜索词作为URI的一部分，您将需要一些脚本：
<form>
<input type="text" placeholder="Search.." name="search" onchange="this.form.action='http://websitename.com/search/'+this.value;return true;">
<button type="submit">Search This Website</button>
</form>行为:只要用户按下submit按钮，浏览器就会跳转到URL=http://websitename.com/search/<user data>。
更新
要获得像这样的http://octopart.com/search?q=<text>，我强烈建议您使用第一种方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51679991
复制相关文章
相似问题