web-dev-qa-db-ja.com

HTML / Javascriptで編集可能なコンボボックスを作成するにはどうすればよいですか？

ユーザーがドロップダウンリストから項目を選択できるようにする必要がありますが、リスト内の項目と一致しない場合でも、代わりにテキストを入力できるようにする必要があります。 HTMLとJavascriptを使用してWebページでこれを実現するにはどうすればよいですか？

selectフィールドはユーザーがテキストを入力することを許可せず、inputテキストフィールドは優先される選択肢を表示しません。

ユーザーがドロップダウンを開いた場合、すべてのアイテムを表示する必要があるため、一致するアイテムのみを表示する単純なオートコンプリートにすることはできません。

javascripthtmlcomboboxdrop-down-menu
31
Christian Davén

そのためのスクリプトを次に示します。 デモ 、 ソース

または、わずかに異なる動作をする別のもの：リンクが削除されました（サイトはもう存在しません）

13
Tom Gullen

かなり前に、この質問はすでに回答されていますが、これはここにたどり着き、必要なものを見つけるのに苦労している他の人々のためです。必要なことを正確に実行できる既存のプラグインを見つけるのに苦労したため、このタスクを達成するために独自のjQuery UIプラグインを作成しました。 jQuery UIサイトのコンボボックスの例に基づいています。誰かの助けになるといいのですが。

https://github.com/tmooney3979/jquery.ui.combify

9
portlandrock

編集可能なコンボボックスの実装を試すことができます http://www.zoonman.com/projects/combobox/

3
zoonman

回答も探していましたが、見つけることができたのは時代遅れでした。

この問題はHTML5以降で解決されています： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

もしそれを見つけていなかったら、私はこのアプローチを採用していたでしょう。

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

2
Jook

コンボボックス機能ではなく、オートコンプリート機能に適したデータリスト要素を忘れてください。

css：

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

html：

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js（jQuery）：

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$input.is(':focus')) {
                $select
                    .hide()
                    .css('z-index', 1);
            }
        }, 20);
    }
    $input
        .focusin(function() {
            if (!$select.is(':visible')) {
                $select
                    .outerWidth($input.outerWidth())
                    .show()
                    .css('z-index', 100);
            }
        })
        .focusout(hideSelect)
        .on('input', function() {
            $select.val('');
        });
    $select
        .change(function() {
            $input.val($select.val());
        })
        .focusout(hideSelect);
});

これは、数値ではなくテキスト入力を使用する場合でも適切に機能します。

1
Nagy Zoltán

これは要件を満たすと思います。

https://github.com/RUPOJS/jsCombo

1
RSS

やってみて

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

次の例を見てください fiddle

0
atom217