6

大量の公開された名前が数百に達する可能性のある選択フィールドがあります。

私が必要とするのは、フィールドをフィルタリングすることです。つまり、

1 つが選択されて検索された場合、フォームのサンプル テキストとして表示され、以前に検索されたサンプル テキストを削除する新しい検索を作成する可能性があります。

ボックスにテキストを入力すると、そのフェンスはテキストのフィルターされたオプションのリストを表示します。

たとえば、テキスト ボックスに「D」または「d」と入力すると、オプションのリストが表示されます。Daniel Diego がすべて表示されます。Diego で検索すると、検索テキスト ボックスを読み込んだ後、Diego の例が表示されます。

<select id="id_name" name="name">
    <option value="3">Diego </option>
    <option value="4">Daniel  </option>
    <option value="5">Fernando  </option>
    <option value="6">Luz </option>
    <option value="7">Catherine  </option>
    <option value="8">Samuel  </option>
    <option value="10">Eduardo  </option>
</select>
4

3 に答える 3

10

これを試して。

選択は、<select>html タグの jQuery プラグインです。

選択ボックスの見栄えが良くなるだけでなく、選択ボックスの上部に非常に優れた検索機能が追加されます。

ソース/デモはここにあります: http://harvesthq.github.com/chosen/

于 2013-02-21T22:51:57.017 に答える
1

jQuery を使用する場合は、次の優れた UI オプションを利用できます。

https://select2.org/dropdown

https://jqueryui.com/selectmenu/

https://harvesthq.github.io/chosen/

Vanilla JavaScript (jQuery なし) を使用する場合。これが最良の選択肢です。

好みに応じて、色やボタンのレイアウトをカスタマイズできます。

より詳しい情報

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
<!DOCTYPE html>
<h2>Basic Select Search/Filter Dropdown</h2>
<p>
Click to open the dropdown menu, and use the input field to search for a specific dropdown link.
</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Select Here</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

于 2020-06-08T15:41:19.847 に答える