jQuery:如何在输入字段中插入链接文本

jQuery: How do I insert link text into input field?

本文关键字：插入 链接 文本 字段 输入 jQuery      更新时间：2023-09-26

我正在进行Ajax Live Search。我的目标是：当你点击其中一个建议的结果时，结果将被插入到搜索字段中。例如，当你在输入字段中输入"ros"，并且你想寻找玫瑰，而玫瑰是建议你的结果时，我希望玫瑰在点击时显示在搜索字段中。

<!-- Lets assume that up to this point the user has typed "ros" 
into the following field -->
<input id="search" type="text">
<!-- ... then roses is a suggested result, with "ros" being highlighted -->
<ul id="results">
  <li class="result">
    <a> 
      <b class="highlight">ros</b>"es"</p>
    </a>
</ul>

以下是我迄今为止提出的jQuery代码，但它不起作用：

$('#results a').click(function() {
    var selection = $(this).html();
    $('#search').val(selection);
});

有人检测到错误了吗？

似乎是事件委派的情况：

$('#results').on('click', 'a', function() {

我看到的是，列表中有一些动态生成的链接，就好像用户在搜索什么一样。如果是这种情况，那么您必须将事件委托给最近的静态父级，在您的情况下是#results，因为事件没有绑定到动态生成的元素，因为它们在绑定事件时不可用。

还有一个通知，因为您有一个</p>的结束标记，它没有开始标记。此外，如果要放置单击的元素的文本，则不必使用.html()，可以使用.text()方法。

Yout HTML无效。您的<a>标签

中有一个关闭的</p>而没有打开的

首先，我认为您不应该简单地使用$(this).html()，因为它将包括html标记，而且您可能不希望插入这些标记。

但我认为你不能让它工作的原因(我假设绝对不会发生任何事情(是因为你在加载结果之前设置了监听器，因此它们不绑定到链接。使用$('#results').on('click', 'a', function(){})"提前"绑定事件。

$('#results a').click(function() {
    var selection = $(this).text();
    $('#search').val((selection.replace("'"", "")).replace("'"", ""));
});
相关文章：