Javascript UI问题：将组合框设计为一个元素高

这是一个处理HTML和Javascript的UI问题，以了解如何在不混淆用户的情况下获得所需的功能

我在下面有一个表格，其中有一个选择框作为我表格中的第一个单元格

此应用程序没有“提交”按钮。您更改选择框，数据库将更新，您更改输入框中的某些内容，数据库将更新

一切都基于Javascript中的

onchange

事件

我的问题是，用户需要能够将项目添加到选择框中，因为它不是独占列表。但是，我希望保持UI的一致性，因此我希望允许用户只在选择框中键入内容，因此需要一个组合框

但是，我不想要两个元素叠加的组合框，因为这样会使每个单元格都比需要的高

因此，另一个选项是使用

onkeydown

事件，如果他们使用ASCII 32-97左右的字符（仅英语单词），那么这将进入一个输入框，因此，当他们单击离开时，选择框中有一个新项目

但是，为了做到这一点，我需要隐藏/取消隐藏两个共享同一位置的元素，一个输入框和一个选择框，都在表的第一列中。这些要素的转移将令人困惑

-->问题1：那么，我如何才能减少这对用户的干扰？问题2：有没有另一种方法可以让可编辑的选择框在HTML中不那么分散注意力 有几个想法：

• 把东西放好，使盒子更宽，而不是更高。因此您得到了[select][textinput][+]（其中+是提交textinput内容的按钮）

• 在选择下拉列表“添加新”中有一个神奇的选择。选择该选项将显示一个带有文本输入和“添加”按钮的某种模式窗口。单击“添加”将元素添加到选择列表的选项列表中，选择该选项，并启动任何常规进程

• 四处寻找一个符合您需要的combobox库。它可能会模拟一个元素，而不是实际使用一个

---

是的，这听起来让我非常困惑。大多数用户可能不会尝试键入新条目，因为它没有视觉上的启示，而那些这样做的用户可能会尝试使用键盘来选择现有条目

比如选择框右边的一个小按钮，在你按下回车键或取消对焦之前，它会变成一个可写的东西怎么样？这对我来说会更清楚

---

或者你可以用一个JavaScript控制的模拟控件来替换整个选择控件。有很多库可以为你做这件事（例如），我从来没有找到一个完全正确的库（尤其是键盘控件），但其中一个可能已经足够好了。

最好的答案似乎是建议此链接的评论：

我已经启动了一个javascript文件，这样我可以概括这个概念，这样它就可以很好地适应我正在做的事情

我还没有为我的选择器、ajax调用或事件处理使用框架，当我可以自己编写时，为一个组件使用一个框架是毫无意义的

---

<>这个设计看起来很有用，我会用画布标签来画下箭头。

我想到了添加新的选项，但是我喜欢弹出式的想法，我没有考虑。更大的问题是我想让它适合更小的显示器，如果没有滚动，虽然它只有7列，但是选择框可以很宽。（30多个字符）为了完整起见，我加入了“加宽”选项。这是一种非常懒惰的方法。Bobince的答案包含指向我在第三点中提到的javascript组合框库的链接。我认为模式“添加新的”表单可能是一种方式。它应该是性能良好的，对用户来说是显而易见的，并且相当容易实现。关于：“在框中键入”功能，你的意思是像这些组合框吗？我喜欢这里的方法，它看起来非常简单和直观。答案中的链接

2

和

3

似乎死了。

<table border="1" bgcolor="#ffcc99" width="90%">
<thead>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>
<select name="SourceFunds*SourceID*SourceID^SourceNumber*1113^1">
<option value="1119">Capital Maintenance</option>
<option value="1063">Waterworks Fund</option>
<option value="1114">Waterworks Fund/Other Sources</option>
</select>
</td>
<td>
<input type="text" value="79" name="SourceFunds*SourceOfFundsYr1*SourceID^SourceNumber*1113^1"/>
</td>
<td>
<input type="text" value="0" name="SourceFunds*SourceOfFundsYr2*SourceID^SourceNumber*1113^1"/>
</td>
<td>
<input type="text" value="0" name="SourceFunds*SourceOfFundsYr3SourceID^SourceNumber*1113^1"/>
</td>
</tr>
</tbody>
</table>