Блог

Я сталкиваюсь со странным поведением (я не гуру javascript:-(). Я хочу использовать typeahead для автозаполнения, что отлично работает для меня. У меня есть в модальном диалоговом окне форма с различными типами полей формы, с событием, которое я хочу включить / отключить эти компоненты формы. Также отлично работает для всех, кроме поля ввода typeahead.

Что у меня есть:

HTML-сниппет:

 <div class="row detailRow">
    <div class="col-md-4">
        <label id="lblAuszubildender" class="detailLabel">Auszubildender:</label>
        </div>
            <div class="col-md-7 col-md-offset-1">
                <input id="txtAuszubildender" name="txtAuszubildender" class="typeahead form-control detailValue" placeholder="Auszubildender" />   

...

// Instantiate the Typeahead UI
$('#txtAuszubildender').typeahead(
{
    hint: true,
    highlight: true,
    minLength: 3
}, 
{
    displayKey: 'value',
    source: apprenticeEngine.ttAdapter()
});
 

Фрагмент JavaScript:

 $(".detailRow").each(function(){
    var labelElement = $(this).find(".detailLabel");
    var valueElement = $(this).find(".detailValue");
    var labelId = labelElement.attr('id');
    var valueId = valueElement.attr('id');
    filterArray[labelId] = valueId;
});
 

При отладке для всех элементов JavaScript работает нормально, только поле ввода typeahead не выдает его идентификатор.

Но странная вещь, вся информация указана во входном объекте:

Если я использую var valueId = valueElement.prop('id'); , вместо undefined я становлюсь пустой строкой.

Я надеюсь, что кто-нибудь может дать подсказку.

РЕДАКТИРОВАТЬ: я немного поиграл с консолью firebug. Я добавил функцию:

 function findDetailElements(){
    var filterArray = {};

    $(".detailRow").each(function(){
        var labelElement = $(this).find(".detailLabel");
        var valueElement = $(this).find(".detailValue");
        var labelId = labelElement.attr('id');
        var valueId = valueElement.attr('id');
        filterArray[labelId] = valueId;
    });

    return filterArray;
}
 

Заполнена переменная:

 var list = findDetailElements();
console.log(list);
 

Результат: («txtAuszubildender все еще отсутствует».)

 Object { lblResource: "txtId", lblZustaendigeStelle: "selZustaendigeStelle", lblAuszubildender: undefined, lblBeruf: "selBeruf", lblFachrichtung: "selFachrichtung", lblSchwerpunkt: "selSchwerpunkt", lblBetrieb: "txtBetrieb", lblBeginn: "txtBeginn", lblEnde: "txtEnde", lblStatus: "txtStatus" }
 

НО когда я делаю что-то вроде:

 $("#txtAuszubildender") 
 

Я получаю результат:

 Object { length: 1, context: HTMLDocument → contract, selector: "#txtAuszubildender", 1 weitere… }
 

Хорошо, я нашел проблему. Каким-то образом typeahead создает второе поле ввода с теми же именами классов. Поэтому созданный второй элемент ввода идет первым и не имеет идентификатора, вот почему я не получаю никакого идентификатора.

Что было бы интересно, есть ли у меня какой-либо контроль над значениями класса в этом втором входном элементе?