如何用 div 文本替换表单文本字符串

Question

我有一个表单，我正在使用onkeyup 事件根据用户类型 在数据库中搜索匹配项。那部分工作很好。结果触发隐藏的 DIV 与匹配项一起显示。

然后我想做的是允许用户点击匹配的结果并使用onclick将该结果插入到用户输入的文本字段中在。

这是我所拥有的：

HTML

Distributor
<font color="red"><b>*</b></font>
<input type="text"
       name="dist" 
       id="dist" 
       value="<? if (isset($dist)) {echo $dist;} ?>" required 
       onkeyup="sugdist(this.value);"/>
<br><br>

脚本

function fillDist() {

var insertText = $(this).text();
   $('#dist').insert(insertText);
}

这是我在 AJAX 脚本方面的内容。

while ($result = $query ->fetch_object()) {
    echo "<div id='fillDist' OnClick='fillDist'>"
           .addslashes($result->name).
         "</div>";
}

它不工作，但它也没有触发任何错误。

有什么想法吗？ 谢谢

Answer 1

流程不是很清楚。 因此，AJAX 脚本返回一个具有onClick 函数的 HTML。 我假设输出已正确添加到您的输出 div，因为我在这里看到一个简单的错误：

OnClick='fillDist'

你应该改成

onClick='fillDist()'

真正调用函数。

但是，你有 jQuery 标签并且你在其他一些操作中使用它，所以你可以避免 HTML 代码中的内联 onClick，并在 javascript/jQuery 方面做这一切：

$(document).on('click', '#fillDist', function() {
  const text = $(this).text();
  $('#dist').text(text);
});

我们正在这样做：

$(document).on('click', '#dist', function() {});

不是这个：

$('#dist').click(function() {});

因为元素是动态注入的。

$(document).on('click', '#fillDist', function() {
  const text = $(this).text();
  $('#dist').text(text);
});

#dist {
  margin: 20px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dist">
  
</div>

<div id="fillDist">click me to add the same text to dist</div>

即使here on codepen也请找到演示。