Question

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

<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());
});

请参阅JSFiddle.net上的工作示例here。

您也可以使用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。

Answer 2

我最终做的是使用：

 $(document).on('click','li.red-red', function(){
        var foo = $('input#search').val($(this).html());
    });

这很有效。我现在唯一的问题是，当运行基于“自动完成”的搜索时，从li.red-red转移到输入#search的html会在网址的正面和背面添加++++。功能。

将信息注入搜索栏jQuery / Javascript

2 个答案: