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

发布于 2024-11-24 22:10:37 字数 432 浏览 3 评论 0原文

所以我的 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" />

原文

So I have a Jquery UI Autocomplete widget in my Jinja2 template which works great. However, I want the value of each program to be the program ID, not the name. IE: {{ p.id }} How do I set the name as the label and the id as the value?

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

压抑⊿情绪 2024-12-01 22:10:37

好的，这有效！

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" />

OK, this works!

The UI Autocomplete input is populated by the label attribute. The hidden_val attribute sets the hidden input with the select event.

<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" />

回复收藏 0 原文

挽心 2024-12-01 22:10:37

看看 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]);
    }
);

Take a look at http://grover.open2space.com/content/using-jquery-autocomplete-ids that should do the trick!

Basically you supply the autocomplete textbox a list of name|id items. It will then show the name, and you only have to modify the textbox to put the id into a hidden form element using the .result() function. Like this:

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

回复收藏 0 原文

素染倾城色 2024-12-01 22:10:37

这种方法可行，但是一旦选择了自动完成建议，项目 ID 就会出现在输入字段中。我想这会让用户感到困惑。还有其他想法吗？

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

This kind of works, but as soon as the autocomplete suggestion is selected, the item id appears in the input field.. confusing for the users, I guess. Any other ideas?

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

回复收藏 0 原文

~没有更多了~