Вопрос пользовательского интерфейса: создание комбобокса для одного элемента

Question

Это вопрос пользовательского интерфейса, касающийся HTML и javascript, чтобы увидеть, как получить желаемую функциональность, не путая пользователя

У меня есть таблица ниже, в которой поле выбора является первой ячейкой в ​​моей таблице.

Это приложение не имеет кнопки отправки. Вы изменяете окно выбора, база данных обновляется, вы что-то меняете в поле ввода, база данных обновляется.

Все основано на событии onchange в javascript.

Моя проблема в том, что пользователь должен иметь возможность добавлять элементы в поле выбора, поскольку это не эксклюзивный список. Но я хочу, чтобы пользовательский интерфейс был согласованным, поэтому я хочу позволить пользователю просто вводить в поле выбора, отсюда и необходимость в поле со списком.

Но я не хочу, чтобы выпадающий список состоял из двух элементов, так как каждая клетка будет выше, чем должна быть.

Таким образом, другой вариант - использовать событие onkeydown, и если они используют символы из ASCII 32-97 или около того (только английские слова), то это войдет в поле ввода, поэтому, когда они щелкают, выбирается В коробке есть новый предмет.

Но, чтобы сделать это, мне нужно будет скрыть / показать два элемента, разделяющих одно и то же место, поле ввода и поле выбора, оба в первом столбце таблицы. Смещение элементов будет сбивать с толку.

-> ВОПРОС 1: Итак, как я могу сделать это менее отвлекающим для пользователя? <- </p>

-> ВОПРОС 2: Есть ли другой способ иметь редактируемое поле выбора, которое может быть менее отвлекающим в HTML? <- </p>

Это вопрос пользовательского интерфейса, приведенная ниже таблица объясняется тем, что он кажется важным для некоторых людей

Таблица приведена исключительно в иллюстративных целях.

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

Answer 1

Да, это звучит очень смущающе для меня. Большинство пользователей, вероятно, не будут пытаться вводить новую запись, поскольку для нее нет визуальной возможности, а те, кто это сделает, вероятно, будут пытаться использовать клавиатуру для выбора существующей записи!

Как насчет чего-то вроде маленькой кнопки справа от поля выбора, которая превращает ее в доступную для записи, пока вы не нажмете Enter или не сфокусируете ее? Это было бы более понятным для меня.

Или вы можете заменить весь элемент управления select на управляемый JavaScript аналог на лету. Есть довольно много библиотек, которые делают это для вас (например. 1 , 2 , 3 ); Я никогда не находил тот, который все делает правильно (особенно с управлением с клавиатуры), но один из них может быть достаточно хорошим.

Answer 2

Пара идей:

• Разложите вещи так, чтобы коробка была шире, а не высокой. поэтому у вас есть [select] [textinput] [+] (где это + - кнопка для фиксации содержимого textinput]

• Сделайте волшебный выбор в выпадающем списке "Добавить новый". Выбор этой опции представляет модальное окно некоторого вида с вводом текста и кнопкой «добавить». Нажатие «Добавить» добавляет элемент в список параметров списка выбора, выбирает этот параметр и запускает любой обычный процесс.

• Найдите библиотеку со списком, которая делает то, что вы хотите. Вероятно, он будет эмулировать элемент, а не использовать его.

Answer 3

Лучшим ответом кажется комментарий, предлагающий эту ссылку: demos.telerik.com / САШИ-Аякс / выпадающий /

Я запустил файл javascript, чтобы я мог обобщить эту концепцию, чтобы она хорошо вписывалась в то, что я делаю.

Я не использовал каркас для своих селекторов, ajax-вызовов или обработки событий, нет смысла получать его только для одного компонента, когда я могу написать его сам.

Этот дизайн кажется очень полезным, и я буду использовать тег canvas для изображения внизу.