w2ui 组合输入在弹出窗口中不起作用

问题描述

有人使用 w2ui.com 组件库吗？有一个很酷的输入组件（称为 combo），可以在您输入时过滤列表。

但是当它位于 popup 内部时，它似乎不起作用。当您在输入框中输入时，过滤器中不会像演示中那样显示任何内容。

这是我的 javascript：

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> '+
                    '<button class="w2ui-btn" onclick="addSymbolToDatabase()">Add</button>',width     : 250,height    : 170,overflow  : 'hidden',color     : '#333',speed     : '0.3',opacity   : '0.8',modal     : true,showClose : false,});
}

var people = ['George Washington','John Adams','Thomas Jefferson','James Buchanan','James Madison','Abraham Lincoln','James Monroe','Andrew Johnson','Ulysses Grant','Andrew Jackson','Rutherford Hayes','Martin Van Buren','James Garfield','William Harrison','Chester Arthur','John Tyler','grover Cleveland','James Polk','Benjamin Harrison','Zachary Taylor','Millard Fillmore','William McKinley','Franklin Pierce','Theodore Roosevelt','John Kennedy','William Howard','Lyndon Johnson','Woodrow Wilson','Richard Nixon','Warren Harding','Gerald Ford','Calvin Coolidge','James Carter','Herbert Hoover','Ronald Reagan','Franklin Roosevelt','George Bush','Harry Truman','William Clinton','Dwight Eisenhower','George W. Bush','Barack Obama'];
people.sort();
$('input[type=combo]').w2field('combo',{ items: people });

对于可以放入弹出正文标签的 html 数量是否存在某种未公开的限制？

编辑： This one 有效。在框中键入并查看其下方的过滤列表。

下面的代码片段显示它在弹出窗口中不起作用。

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> ',width     : 300,height    : 200,{ items: people });

.w2ui-overlay {
    z-index: 1601 !important;
}

<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>

<button onclick="openAddSymbolPopup()">w2ui Popup</button>

解决方法

您遇到的问题与我最初的想法不同。您在打开弹出窗口之前调用了组合的 init 函数，但是当您打开弹出窗口时，弹出窗口的整个内容都是动态创建的。这意味着您尝试初始化组合的元素当时还不存在。

所以你必须在每次打开弹出窗口时调用 init 组合函数，在它呈现其内容之后。

修复方法如下：

from bokeh.plotting import figure,output_file,show

output_file("test.html")
p = figure()

p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None
p.axis.major_tick_in = 10
p.axis.major_tick_out = 0
p.axis.minor_tick_in = 5
p.axis.minor_tick_out = 0

p.add_layout(LinearAxis(major_label_text_alpha=0,minor_tick_in=5,minor_tick_out=0,major_tick_in=10,major_tick_out=0),'right')
p.add_layout(LinearAxis(major_label_text_alpha=0,'above')

p.line([-10,10],[-10,10])
show(p)

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',buttons   : '<button class="w2ui-btn" onclick="w2popup.close();">Close</button> ',width     : 300,height    : 200,overflow  : 'hidden',color     : '#333',speed     : '0.3',opacity   : '0.8',modal     : true,showClose : false,});
    $('input[type=combo]').w2field('combo',{ items: people });
   /* ☝️ this input only exists while the popup is open. 
    *    You have to call 
    *    the above function every time you open the popup.
    */
}

var people = ['George Washington','John Adams','Thomas Jefferson','James Buchanan','James Madison','Abraham Lincoln','James Monroe','Andrew Johnson','Ulysses Grant','Andrew Jackson','Rutherford Hayes','Martin Van Buren','James Garfield','William Harrison','Chester Arthur','John Tyler','Grover Cleveland','James Polk','Benjamin Harrison','Zachary Taylor','Millard Fillmore','William McKinley','Franklin Pierce','Theodore Roosevelt','John Kennedy','William Howard','Lyndon Johnson','Woodrow Wilson','Richard Nixon','Warren Harding','Gerald Ford','Calvin Coolidge','James Carter','Herbert Hoover','Ronald Reagan','Franklin Roosevelt','George Bush','Harry Truman','William Clinton','Dwight Eisenhower','George W. Bush','Barack Obama'];
people.sort();

警告： 如果页面中有多个组合输入，则应该有两个单独的 init 组合函数。一种用于弹出窗口外的组合，另一种在打开弹出内容后运行。

沿着这些路线：

<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>

<button onclick="openAddSymbolPopup()">w2ui Popup</button>

function openAddSymbolPopup() {
    w2popup.open({
        title     : 'Add Symbol',body      : '<div style="height: 25px"></div>' +
        '<div class="w2ui-field w2ui-span3">' +
            '<label>Symbol:</label>' +
            '<div> <input type="combo" id="popup-combo"><span class="legend"></span> </div>' +
        '</div>' +
        '<div style="height: 20px"></div>',});
    $('#popup-combo').w2field('combo',{ items: people });
   /* ☝️ init the combo inside the popup only,every time the popup opens.
    */   
}

var people = ['George Washington','Barack Obama'];
people.sort();

$('input[type=combo]').w2field('combo',{ items: people });
/* ☝️ init any combos you have in the page (placed outside of popups).
 */

html javascript w2ui