How to add values to Jquery UI Autocomplete text input

Question

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

MFB · Accepted Answer · 2011-07-19 02:48:11Z

1

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

answered Jul 19, 2011 at 2:48

MFB

20k29 gold badges76 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kolky · Accepted Answer · 2011-07-18 11:11:08Z

0

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

answered Jul 18, 2011 at 11:11

Kolky

2,9771 gold badge22 silver badges43 bronze badges

1 Comment

Andrew Whitaker Over a year ago

I believe this article is geared at the now deprecated jQuery autocomplete plugin, not the jQueryUI one (which does not have a result function)

MFB · Accepted Answer · 2011-07-19 01:26:56Z

0

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>

answered Jul 19, 2011 at 1:26

MFB

20k29 gold badges76 silver badges121 bronze badges

Collectives™ on Stack Overflow

How to add values to Jquery UI Autocomplete text input

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related