web-dev-qa-db-ja.com

1つのドロップダウンメニュー/テキストフィールド

私は新しいサイトの構築に取り組んでおり、サイト内の何かの量を選択するためのドロップダウンメニューが必要です。しかし同時に、テキストを受け入れるにはこのドロップダウンリストが必要です。そのため、クライアントがドロップダウンリストから選択したい場合は可能です。また、クライアントがテキストで金額を入力したい場合も可能です。ご覧のとおり、私はそれを二重にします。

例：amountドロップダウンメニューがあり、その要素が（1,2,3）であるとします。

クライアントが金額を5にする必要があると仮定します-これは彼の権利です-ドロップダウンリストに存在しないため、クライアントは金額をテキストで入力する必要があります。したがって、エントリについては、クライアントはドロップダウンリストから選択するか、金額をテキストで入力する必要があります。

私の問題の説明と、私があなたに紹介した簡単な例の後に、私の質問があります：

ドロップダウンメニューとテキストフィールドを、分離せずにデュアルとして作成するHTMLコードはありますか？

htmlhtml-selecthtml-input
53
khalid jarrah

オプション1

dhtmlgoodies のスクリプトを含めて、次のように初期化します。

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

オプション2

<select>要素と<input>要素を組み合わせ、スタイルを設定し、JavaScriptを使用して前後に切り替えるカスタムソリューションを次に示します。

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>
36
Devang Rathod

HTML5でネイティブにこれを行うことができます <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>
89
onaclov2000

私はこの質問と議論が非常に有用だと感じ、最終的に解決策を示したかった。 @DevangRathodの回答に基づいていますが、jQueryを使用していくつかの調整を行ったため、同様の作業をしている人を支援するために、完全にコメントされたサンプルを表示したかったのです。私はもともとHTML5 data-list要素を使用していましたが、ボックスに入力されたテキストと一致しないオプションをドロップダウンリストから削除するため、そのソリューションには不満でした。私のアプリケーションでは、完全なリストを常に利用できるようにしたかったのです。

ここで完全に機能するデモ： https://jsfiddle.net/abru77mm/

HTML：

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS：

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS：

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

私の実装に関する改善のためのコメントを歓迎します。誰かがこれが役立つことを願っています。

5
Daniel Skarbek

JQuery Tokenの入力が好きです。実際には、上記の他のオプションのいくつかよりもUIを好みます。

http://loopj.com/jquery-tokeninput/

参照： http://railscasts.com/episodes/258-token-fields の説明

1
Matthias

@ajdeguzman（私の日を作った）のjsフィドルに触発され、ここに私のnode/React派生物があります：

 <div style={{position:"relative",width:"200px",height:"25px",border:0,
              padding:0,margin:0}}>
    <select style={{position:"absolute",top:"0px",left:"0px",
                    width:"200px",height:"25px",lineHeight:"20px",
                    margin:0,padding:0}} onChange={this.onMenuSelect}>
            <option></option>
            <option value="starttime">Filter by Start Time</option>
            <option value="user"     >Filter by User</option>
            <option value="buildid"  >Filter by Build Id</option>
            <option value="invoker"  >Filter by Invoker</option>
    </select>
    <input name="displayValue" id="displayValue" 
           style={{position:"absolute",top:"2px",left:"3px",width:"180px",
                   height:"21px",border:"1px solid #A9A9A9"}}
           onfocus={this.select} type="text" onChange={this.onIdFilterChange}
           onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} 
           placeholder="Filter by Build ID"/>
 </div>

次のようになります。

enter image description here

1
Gunnar Forsgren - Mobimation

仕事をするjQueryオートコンプリートベースのソリューションを追加したいと思います。

ステップ1：リストの高さを固定してスクロール可能にする

https://jqueryui.com/autocomplete/ 「スクロール可能」の例からコードを取得し、結果のリストに最大の高さを設定して、選択ボックスとして動作するようにします。

ステップ2：フォーカスのリストを開きます：

フォーカスイベントでjquery uiオートコンプリートリストを表示

ステップ3：最小文字数を0に設定して、入力文字数に関係なく開くようにします

最終結果：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "LISP",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
//      source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
      source: function (request, response) {
          response( availableTags);
      },
      minLength: 0
    }).focus(function(){
//        $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
        $(this).data("uiAutocomplete").search('');
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

ここでjsfiddleを確認してください。

https://jsfiddle.net/bao7fhm3/1/

0
Alexandru Trandafir Catalin