Question

所以我的Jinja2模板中有一个Jquery UI自动完成小部件，效果很好。但是，我希望每个程序的值都是程序ID，而不是名称。 IE：{{ p.id }}如何将名称设置为标签，将id设置为值？

<script>
$(function() {
    var programs = [
        {% for p in programs %}
        '{{ p.Name }}',
        {% endfor %}
    ];
    $( "#programs" ).autocomplete({
        source: programs
    });
});
</script>

<input type="text" name="program" id="programs" />

Answer 1

好的，这个有效！

UI自动填充输入由label属性填充。 hidden_val属性使用select事件设置隐藏输入。

<script>
$(function() {
    var programs = [
        {% for p in programs %}
        {
        hidden_val: "{{ p.id }}",
        label: "{{ p.Name }}"
        },
        {% endfor %}
    ];
    $( "#programs" ).autocomplete({
        delay: 0,
        source: programs,
        select: function(event, ui){
            $( "#program_val" ).val(ui.item.hidden_val);
        }
    });
});
</script>

<input type="text" id="programs" />
<input type="hidden" id="programs_val" />

Answer 2

看看http://grover.open2space.com/content/using-jquery-autocomplete-ids应该做的伎俩！

基本上，您为自动填充文本框提供了name|id项的列表。然后它将显示名称，您只需修改文本框以使用.result()函数将id放入隐藏的表单元素中。像这样：

$("#mytextbox")
  .autocomplete(data)
  .result(
    function (evt, data, formatted)
    {
      $("#hiddenIDbox").val(data[1]);
    }
);

Answer 3

这种方法很有效，但只要选择了自动填充建议，项目ID就会出现在输入字段中。我想这对用户来说很困惑。还有其他想法吗？

<script>
$(function() {
    var programs = [
        {% for p in programs %}
        {
        value: "{{ p.id }}",
        label: "{{ p.Name }}"
        },
        {% endfor %}
    ];
    $( "#programs" ).autocomplete({
        source: programs
    });
});
</script>

如何将值添加到Jquery UI自动完成文本输入

3 个答案: