javascript - 将信息注入(inject)搜索栏 jQuery/Javascript

Question

在悬停或单击时将 li 中的内容注入(inject)文本框的最佳方法是什么？我想就像搜索页面的自动完成一样。

<form>
    <input id="search" type="text" size="75" maxlength="60" placeholder="search stuff saturday" value="">
</form>

<ul>
    <li class="red-red">stuff here</li>
    <li class="red-red">more things</li>
    <li class="red-red">ginormous things</li>
</ul>

如有任何帮助，我们将不胜感激!

Answer 1

使用 jQuery，您可以使用.val()函数设置 <input> 的值，和.text()函数获取 <li> 的值s:

$("li.red-red").click(function() {
    $("input#search").val($(this).text());
});

参见工作示例 here在 JSFiddle.net 上。

您可以使用 jQuery 的 .hover() 来做到这一点同样，但它的语法有点不同(但要注意:您需要 onmouseover 和 onmouseout 事件的处理程序)。

<小时/>

看到你的评论，需要做出很大的改变。 jQuery 选择器(或 JS，就此而言)仅适用于现有元素。

因此，为了使代码正常工作，您必须将其放在动态创建之后。问题是当您需要在页面加载后添加列表项时。

如果是这样，那么您可能应该应用 .click()每个 <li> 的处理程序当你创建它时，就像这样:

for(var i = 0; i < 25; i++) {  // this is my "dynamic creation"
    var li = $("<li>");
    li.addClass("red-red");
    li.text("stuff here " + i);
    li.click(function() {      // put `click()` handler on EXISTING li (variable)
        $("input#search").val($(this).text());
    });
    $("ul").append(li);
}

参见updated working example .