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

Question

有人使用 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', 'John Adams', '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', 'Grover Cleveland', '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',
        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,
    });
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', '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', 'Grover Cleveland', '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 });

.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>

Answer 1

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

因此每次打开弹出窗口时都必须在呈现其内容后调用 init 组合函数。

修复方法如下：

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', 'John Adams', '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', 'Grover Cleveland', '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();

<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>',
        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,
    });
    $('#popup-combo').w2field('combo', { items: people });
   /* ☝️ init the combo inside the popup only, every time the popup opens.
    */   
}

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', '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', 'Grover Cleveland', '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 });
/* ☝️ init any combos you have in the page (placed outside of popups).
 */

<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>
<hr>
<br>This input should work and so should the one in the popup.
<br>You shouldn't init this one more than once.
<br><input type="combo">

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

w2ui combo input doesn't work inside a popup

javascript

html

w2ui