使用搜索选项创建选择框

Question

使用搜索选项创建选择框

SBB*_*SBB 31 html javascript css jquery html-select

我想复制你在这张图片中看到的内容. 在此输入图像描述

我希望能够在框上方的文本字段中键入或直接单击该选项.

最好的方法是什么？是否存在任何相关的引导程序？

Answer 1

Hem*_*lle 20

这个简单的代码对我有用

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

@HomeIsWhereThePcIs - 公平地说，如果它*不允许*允许您输入任何内容，那么它就会变成“猜测与列表中的某些内容匹配的下一个正确字母”的游戏。在这种情况下，我不相信用户会理解为什么他们输入的键没有显示在输入中。它实际上看起来很破碎。 (3认同)
这允许用户输入任何内容，而不仅仅是提供的选项。还需要双击才能打开下拉列表。 (2认同)
此功能是 HTML 5 吗？因为你不需要 Jquery (2认同)

Answer 2

Kai*_*ver 13

选择2 http://select2.github.io可能比选择更好,更活跃.

请参阅此比较:http: //sitepoint.com/jquery-select-box-components-chosen-vs-select2

我去了Select2(几个月前),因为Chosen在通过IME使用中文字符时遇到了问题http://github.com/harvesthq/chosen/issues/2663它很棒.

Answer 3

小智 9

您可以使用 select2 。它是这项工作的最佳 js。
https://select2.org/dropdown

$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
   $("select").select2();
});

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

</head>
<body>
  <select id="select_page" style="width:200px;" class="operator"> 
         <option value="">Select a Page...</option>
         <option value="alpha">alpha</option> 
         <option value="beta">beta</option>
         <option value="theta">theta</option>
         <option value="omega">omega</option>
  </select>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 6

改用数据列表。

<form action="/action_page.php" method="get">
      <input list="browsers" name="browser">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit">
    </form>

Run Code Online (Sandbox Code Playgroud)

不支持 IE 9 和后面。 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

Answer 5

Mah*_*our 6

全选项可搜索选择框

这也支持控制按钮键盘，例如ArrowDown ArrowUp和Enter键

function filterFunction(that, event) {
    let container, input, filter, li, input_val;
    container = $(that).closest(".searchable");
    input_val = container.find("input").val().toUpperCase();

    if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) != -1) {
        keyControl(event, container)
    } else {
        li = container.find("ul li");
        li.each(function (i, obj) {
            if ($(this).text().toUpperCase().indexOf(input_val) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        container.find("ul li").removeClass("selected");
        setTimeout(function () {
            container.find("ul li:visible").first().addClass("selected");
        }, 100)
    }
}

function keyControl(e, container) {
    if (e.key == "ArrowDown") {

        if (container.find("ul li").hasClass("selected")) {
            if (container.find("ul li:visible").index(container.find("ul li.selected")) + 1 < container.find("ul li:visible").length) {
                container.find("ul li.selected").removeClass("selected").nextAll().not('[style*="display: none"]').first().addClass("selected");
            }

        } else {
            container.find("ul li:first-child").addClass("selected");
        }

    } else if (e.key == "ArrowUp") {

        if (container.find("ul li:visible").index(container.find("ul li.selected")) > 0) {
            container.find("ul li.selected").removeClass("selected").prevAll().not('[style*="display: none"]').first().addClass("selected");
        }
    } else if (e.key == "Enter") {
        container.find("input").val(container.find("ul li.selected").text()).blur();
        onSelect(container.find("ul li.selected").text())
    }

    container.find("ul li.selected")[0].scrollIntoView({
        behavior: "smooth",
    });
}

function onSelect(val) {
    alert(val)
}

$(".searchable input").focus(function () {
    $(this).closest(".searchable").find("ul").show();
    $(this).closest(".searchable").find("ul li").show();
});
$(".searchable input").blur(function () {
    let that = this;
    setTimeout(function () {
        $(that).closest(".searchable").find("ul").hide();
    }, 300);
});

$(document).on('click', '.searchable ul li', function () {
    $(this).closest(".searchable").find("input").val($(this).text()).blur();
    onSelect($(this).text())
});

$(".searchable ul li").hover(function () {
    $(this).closest(".searchable").find("ul li.selected").removeClass("selected");
    $(this).addClass("selected");
});

Run Code Online (Sandbox Code Playgroud)

div.searchable {
    width: 300px;
    float: left;
    margin: 0 15px;
}

.searchable input {
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: block;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
}

.searchable ul {
    display: none;
    list-style-type: none;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #add8e6;
    border-top: none;
    max-height: 180px;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;
}

.searchable ul li {
    padding: 7px 9px;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    color: #6e6e6e;
}

.searchable ul li.selected {
    background-color: #e8e8e8;
    color: #333;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchable">
    <input type="text" placeholder="search countries" onkeyup="filterFunction(this,event)">
    <ul>
        <li>Algeria</li>
        <li>Bulgaria</li>
        <li>Canada</li>
        <li>Egypt</li>
        <li>Fiji</li>
        <li>India</li>
        <li>Japan</li>
        <li>Iran (Islamic Republic of)</li>
        <li>Lao People's Democratic Republic</li>
        <li>Micronesia (Federated States of)</li>
        <li>Nicaragua</li>
        <li>Senegal</li>
        <li>Tajikistan</li>
        <li>Yemen</li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 6

Hem*_*lle 6

Selectize Js具有我们需要的所有选项。请尝试

  $(document).ready(function () {
      $('select').selectize({
          sortField: 'text'
      });
  });

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
</head>
<body>
  <select id="select-state" placeholder="Pick a state...">
    <option value="">Select a state...</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
  </select>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

最佳答案！正是我正在寻找的东西，而无需更改我的原始代码。谢谢：） (5认同)

Answer 7

小智 5

这对我们大多数人都有效。Hemanth Palle给出的答案是最简单的方法，它对我有用，不需要 JS 代码。我发现的唯一问题是，根据 W3Schools，Internet Explorer 9 及更早版本或 Safari 不支持datalist 标记。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，11 月前
查看次数：	157833 次
最近记录：	5 年，10 月前