自动完成代码？

Posted 2023-05-09

【中文标题】自动完成代码？

【英文标题】：Codes for autocomplete?

【发布时间】：2014-07-22 11:15:44

【问题描述】：

我目前正在尝试编写一些代码来自动完成字段。我实际上已经完成了大约 90% 并且它一直工作到现在。

当我想在数据库中按姓氏搜索人时，例如以“s”开头，并在“输入姓氏”字段中键入“s”，所有以 s 开头的姓氏都是 显示。到目前为止，我对结果感到满意。请看下图：

但是，当用户单击下拉列表中的名称时，我无法编写适当的代码来允许在“输入姓氏”字段中填充名称。

有人可以帮我吗？我可以使用哪些代码来执行上述任务？

我对下拉列表中的每一行都使用了以下代码。 rs.getString(1) 表示从 mysql 数据库中检索到的名称。

<div onclick='fill(rs.getString(1));'>rs.getString(1)</div>

另外，在html页面的头部，我声明了一个javascript函数如下：

<script type="text/javascript">

function fill(thisValue) 
           $('#inputString').val(thisValue);


</script>

我在想，当用户点击下拉列表中的名称时，会调用填充函数，并将函数的参数 thisValue 设置为 rs.getString(1)。最后，具有属性 id=inputString 的文本字段 Enter Last Name 的值将设置为 rs.getString(1)。因此，我将能够根据用户单击的内容填充文本字段 Enter Last Name。

但是，当我单击下拉列表中的名称时，没有任何反应。输入姓氏字段未填充任何数据。我必须手动输入名称，这违背了自动完成系统的目的。

有人可以指导我吗？

感谢阅读。

问候

【问题讨论】：

看一下 jQuery TokenInput 库：loopj.com/jquery-tokeninput/

@user3391344 为什么不使用现有的 jQuery 库之一？例如，jQuery UI Autocomplete

【参考方案1】：

向div 添加一个类，如下所示。

<div class='row'>rs.getString(1)</div>

现在在 Jquery 中使用以下代码。

$(".row").click(function(e)
       $("#inputstring").val($(this).html());
 );

【参考方案2】：

假设列表是<ul class='list'><li>...：

// on clicking the li of ul class .list
$('.list').on('click', 'li', function() 
    // put the text of the ul to the value of the input
    $('#inputString').val(this.text());
);