Question

我正在尝试制作一个搜索工具，用于在Google上查找图片。这个想法是有一个搜索后缀，例如树皮或花，以及从列表中添加名称（植物名称）。到目前为止，我已经设法制作了带有静态后缀的搜索栏，但是我正在努力将名称点击到栏中。理想情况下，名称只会添加到后缀中，但是现在我只能将它们覆盖。编辑：我希望列表中的名称与任何搜索后缀组合。

到目前为止，这是我的代码： JSFIDDLE

<form action="http://www.google.com/images?q=“ target="_blank">
    <input id="addons1" value="bark+" name="q">
    <input type="submit">
</form>

<a onclick="document.getElementById('addons1').setAttribute('value','bark+Fagus sylvatica');">Fagus sylvatica</a> <br>

我正在使用的函数是document.getElementById，但也许最好有一个通用函数，允许列表中的所有项目被单击到表单中，或者可能只是一个表单，然后有一个选项来添加后缀。希望我想要实现的目标是可以理解的。

祝你好运

Answer 1

这是我的解决方案版本！

我认为一种输入形式就足够了。

然后进行了一些CSS更改，这些更改似乎是布局所必需的。

最后，我们可以从a获取div个keywords标记元素，然后添加一个事件onclick，它将获取a内的文本值1}}标记并将其附加到输入元素值！

如果以下代码段存在任何问题，请与我们联系！

for ( var i of document.getElementsByClassName('keywords')[0].children){
	i.onclick = function(){
    document.getElementById('addons1').value += this.innerHTML + "+";
  }
}

.keywords a{
  display:block;
}

<form action="http://www.google.com/images?q=" target="_blank">
  <input id="addons1" value="bark+" name="q">
  <input type="submit">
</form>

<br>
<br>
<div class="keywords">

  <a>Fagus sylvatica</a>
  <a>Abies alba</a>
  <a>Picea abies</a>
  <a>Picea omorika</a>
  <a>Larix decidua</a>
</div>

将列表中的文本发送到输入表单

1 个答案: