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脚本返回的HTML具有onClick函数。我假设输出已正确添加到您的输出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的演示。

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

1 个答案: