javascript - 允许用户输入值的列表框

Question

在GWT中，如何拥有一个ListBox，用户可以选择下拉值并可以在列表框中键入硬编码值？

注意:在这种情况下我不应该使用任何 smartgwt，ot ext-gwt。

Answer 1

您可以结合TextBox 和ListBox 创建这种widget。我建议在 Panel 上放置一个 TextBox 并在其中内联添加一个 ListBox 。使用减小 ListBox 的宽度，以便仅其下拉按钮可见。现在，在选择下拉值时，请调用 TextBox setText()，并且在需要选择值的地方始终使用 TextBox 值。

示例代码:

UI绑定(bind)器

<g:HorizontalPanel>
<g:TextBox ui:field="textBox"/>
<g:ListBox ui:field="list" addStyleNames="demo-ListBox"/>
</g:HorizontalPanel>

CSS:

.demo-ListBox {
    width: 20px;
}

Java

String text = list.getValue(list.getSelectedIndex());
textBox.setText(text);

// use the textBox.getText() always to get the value for the widget
//Also you can later compare the value of textBox and add it to the ListBox if needed via calling the list.addItem(text)

最终结果: