如何预编译 jquery ui 自动完成小部件？

Question

我在表单中有一个 jquery ui 自动完成小部件，我想从数据库中预先选择它的值。 我的自动完成以下列方式工作：id 是一个数字，标签和值是相同的，并且是 id +“-”+描述的串联。 When a value from the autocomplete is selected, a hidden field's value is set to the value of id. 然后，在提交表单时将隐藏字段值保存到数据库中。 当用户返回页面进行编辑时，我需要重新加载数据库中的值：我再次设置了 idden 字段值，然后我想用 id +“ - ”的串联预编译自动完成小部件的值+ 描述取自数据库。 我想我应该触发在自动完成中选择一行的事件，但我不知道该怎么做。你有什么想法？ 谢谢 这是自动完成的代码：

$('#codice_contratto').autocomplete({
    source: 'do_contratto.php',
    select: function(event, ui) {
                $('#id_contratto').val(ui.item.id);
            }
});

Answer 1

在返回页面进行编辑的服务器端代码中，我建议将具有自动完成功能的文本框和隐藏字段的值设置为从服务器返回的正确值。那将是一个服务器端解决方案，您的 HTML 看起来像这样：

<input type="textbox" id="condice_contratto" value="1 - the description" />
<input type="hidden" id="id_contratto" value="1" />

当元素的值被预设时，JQuery 自动完成插件可以正常工作。实际上并没有“选择”项目本身的概念。它只是骑在文本框之上，并通过许多精美的 UI 设置其值。

如果您需要客户端解决方案，只需执行以下操作：

$(document).ready(function() {
   $('#condice_contratto').val(current_id + ' - ' + current_description);
   $('#id_contratto').val(current_id);
}

这假设变量 current_id 和 current_description 设置为正确的值。