Question

我想在 Typeahead.js 列表中添加HTML 选择元素。我的问题是，在追加到列表后，选择元素没有打开并带有点击。它在键盘中使用 keydown 打开。如何打开预先输入中的选择列表点击后。

这是我的代码我使用javascript将追加包含选择字段的div添加到预先输入列表

    var iFrameDocument = $('#editorArea-frame')[0].contentDocument;

    //selecting the typeahead List using its classname
    var typeaheadlist = iFrameDocument.getElementsByClassName("tt-menu");

     //I am using an iframe in which we have typeahead List with class Name tt-menu
     var iFrameDOM = $("iframe#editorArea-frame").contents();

    //Creating a drug div to be appended to the Typeahead List
    var drugDiv = document.createElement("div")
    drugDiv.className = "drugDiv";


    //Data to be loaded in the selection List 
    var prescriptionFrequenciesData = [  {
            "value": "qMWF",
            "title": "Every Monday, Wednesday and Friday",
            "id": "162256"
        },{
            "value": "q72h",
            "title": "Every seventy-two hours",
            "id": "162255"
        },{
            "value": "q48h",
            "title": "Every forty-eight hours",
            "id": "162253"
        }
    ]

    //List element in which select field is added
    var listElement = document.createElement("li");
    listElement.id = "listToAdd";


    //Input Field for Frequency
    var inputFieldForFrequency = document.createElement("select");
        inputFieldForFrequency.id = "frequencyList";
        inputFieldForFrequency.style.color = "black";
        inputFieldForFrequency.style.width = "auto";
        inputFieldForFrequency.style.marginLeft = "1px";
        inputFieldForFrequency.style.marginRight = "1px";
        inputFieldForFrequency.style.padding = "1px";
        inputFieldForFrequency.style.border = "solid 1px #c9c9c9";

    //Adding values to the Option List
    var start = '<option value="">Select Frequency</option>';
    var len = prescriptionFrequenciesData.length;
        for (var i = 0; i < len; i++) {
                start += '<option value="' + prescriptionFrequenciesData[i].value + '">' + prescriptionFrequenciesData[i].title;
        }

    inputFieldForFrequency.innerHTML = start;

    //Appending selection Field in inputFieldForFrequency
    listElement.appendChild(inputFieldForFrequency); 

    //Appending list to the drugDiv
    drugDiv.appendChild(listElement);

    //Appending drugDiv to the TypeheadList
    typeaheadlist[0].prepend(drugDiv);


    //Inorder to fucus the selection list i use below code
    inputFieldForFrequency.addEventListener('click', function(){
                console.log('Frequency List Clicked');
                inputFieldForFrequency.focus();
                iFrameDOM.find('.tt-menu').show(); //As i focus the select Field typeahead List gets hidden
                                                   // I have to explicitly open the List
                inputFieldForFrequency.focus(); //
            });

我的结构DOM如Folows： -

IFRAME（ID：editorArea =帧）
DIV（ID：editorDiv）
div（类：tt-menu） - ＆gt; twitter Typeahead.js

iframe包含editorDiv，它包含tt菜单。

这是屏幕截图 typeaheadList with select Field

现在，当我点击列表后按键盘键盘时，它会打开但不能点击。 enter image description here

选择标记不在Typeahead.js

0 个答案: