Как добавить значения в Jquery UI Автозаполнение ввода текста

Question

Итак, у меня есть шаблон автозаполнения Jquery UI в моем шаблоне Jinja2, который отлично работает.Однако я хочу, чтобы значением каждой программы был идентификатор программы, а не имя.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

ОК, это работает!

Ввод автозаполнения пользовательского интерфейса заполняется атрибутом 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

Этот тип работает, но как только предложение автозаполнения выбрано, в поле ввода появляется идентификатор элемента. Я полагаю, что это вводит пользователей в заблуждение. Любые другие идеи?

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

Answer 3

Взгляните на http://grover.open2space.com/content/using-jquery-autocomplete-ids, который должен сработать!

В основном текстовое поле автозаполнения представляет собой список name|id элементов.Затем он покажет имя, и вам нужно только изменить текстовое поле, чтобы поместить идентификатор в скрытый элемент формы с помощью функции .result().Как это:

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