source

검색 옵션을 사용하여 선택 상자 만들기

lovecheck 2023. 10. 14. 10:20
반응형

검색 옵션을 사용하여 선택 상자 만들기

저는 이 이미지에서 볼 수 있는 것을 복제하려고 합니다.enter image description here

상자 위에 있는 텍스트 필드에 입력하거나 옵션을 직접 클릭하면 됩니다.

그것을 해결하는 가장 좋은 방법은 무엇입니까?이미 존재하는 부트스트랩과 관련된 것이 있습니까?

이 간단한 코드가 나에게 효과가 있었습니다.

<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

선택 태그만 사용해야 하는 경우에는 Selectize Js를 사용합니다.우리가 필요로 하는 모든 옵션이 있습니다.Selectize Js를 사용하여 시도해 보십시오.

Selectize Js는 우리가 필요로 하는 모든 옵션을 가지고 있습니다.한번 써 보세요.

  $(document).ready(function () {
      $('select').selectize({
          sortField: 'text'
      });
  });
<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>

Select2 http://select2.github.io 은 Choosen보다 훨씬 더 좋고 활동적일 수 있습니다.

비교 보기: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2

IME http://github.com/harvesthq/chosen/issues/2663 을 통해 Choosen이 한자를 사용할 때 문제가 발생하여 Select2(수개월 전)를 선택했습니다. 잘 작동합니다.

select2를 사용하시면 됩니다. 이 직업에 가장 적합한 js입니다.
https://select2.org/dropdown

$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
   $("select").select2();
});
<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>

전체 옵션 검색 가능 선택 상자

이것은 또한 다음과 같은 제어 버튼 키보드를 지원합니다.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");
});
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;
}
<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>

순수 HTML Datalist 요소를 사용하여 JavaScript 없이 이를 달성할 수 있습니다.

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

참조:

이것은 우리 대부분에게 효과가 있을 것입니다.가장 쉬운 방법은 헤만스 팔레가 제시한 답입니다, 저에게는 효과가 있었고 JS 코드는 필요 없었습니다.제가 찾은 유일한 문제는 W3Schools에 따르면 데이터 목록 태그가 Internet Explorer 9 이전 버전이나 Safari에서 지원되지 않는다는 것입니다.

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

바닐라 js만으로 목표에 도달하고 싶다면 Selectize.js에서 포크된 후 jQuery에서 분리된 Tom Select 라이브러리를 사용하는 것을 강력히 추천합니다.

    new TomSelect("#select-state",{
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        }
    });
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>
</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>

$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
   $("select").select2();
});
<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>

이것은 좋은 해결책이었지만, 문제는 대용량 데이터에는 비효율적이라는 것입니다.

여기에 앞서 만든 jQuery: https://bitbucket.org/warwick/searchablelist/src/master/ 을 사용하는 편리한 오픈 소스 라이브러리가 있습니다. 그리고 여기에 제 VPS에 대한 작업 복사본이 있습니다. http://developersfound.com/SearchableList/ 라이브러리는 오버라이드 가능한 동작으로 사용자 지정이 가능하고 동일한 웹 페이지에서 별도의 디자인을 가질 수 있습니다. 이것이 도움이 되기를 바랍니다.

코드의 몇 가지 업데이트를 통해 목표에 도달하고 싶다면 다음을 수행하십시오.

     <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" />
    <!-- Be sure to put the links in the right position to avoid dependency issue.-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>

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

  // to clear the selected value.
   $('form').find('.selectized').each(function(index, element) { element.selectize && element.selectize.clear() })

 </script>

이 기능을 계속 사용하는 모든 사용자는 이 모든 작업을 쉽게 수행할 수 있는 Select2도 고려해 볼 수 있습니다.https://select2.org/getting-started/installation

플러그인이 없는 간단한 솔루션이 있습니다.html과 약간의 jquery만.아래 코드 샘플을 html 파일로 저장하여 테스트할 수 있습니다.

function myFunction() {
  $("#dropdown-values").addClass("show");
}

$(document).click(function(e) {
  if( e.target.id != 'myInput') {
    $("#dropdown-values").removeClass("show");
  }
});

function filterFunction() {
  var input, filter, a, i;
  filter = $("#myInput").val().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";
    }
  }
}

function setValueOfInput(e) {
    $("#myInput").val(e.innerHTML);
}
.dropdown-content {
  position: absolute;
  background-color: #f6f6f6;
  overflow: auto;
}

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

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

.show {display: block !important;}

.dropdown-values{
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Dropdown with search</h2>

<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()" onclick="myFunction()">
    <div id="dropdown-values" class="dropdown-values">
        <a onclick="setValueOfInput(this)">option 1</a>
        <a onclick="setValueOfInput(this)">option 2</a>
        <a onclick="setValueOfInput(this)">option 3</a>
        <a onclick="setValueOfInput(this)">option 4</a>
        <a onclick="setValueOfInput(this)">option 5</a>
    </div>
  </div>
</div>

저는 부트스트랩 4를 위해 제 버전을 했습니다.사용하고 싶으시면 확인 가능합니다.https://github.com/AmagiTech/amagibootstrapsearchmodalforselect

amagiDropdown(
    {
        elementId: 'commonWords',
        searchButtonInnerHtml: 'Search',
        closeButtonInnerHtml: 'Close',
        title: 'Search and Choose',
        bodyMessage: 'Please firstly search with textbox below later double click the option you choosed.'
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
                <label for="commonWords">Favorite Word</label>
                <select id="commonWords">
                    <option value="1">claim – I claim to be a fast reader, but actually I am average.</option>
                    <option value="2" selected>be – Will you be my friend?</option>
                    <option value="3">and – You and I will always be friends.</option>
                </select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://rawcdn.githack.com/AmagiTech/amagibootstrapsearchmodalforselect/9c7fdf8903b3529ba54b2db46d8f15989abd1bd1/amagidropdown.js"></script>

jquery를 사용하면 됩니다.코드는 여기 있습니다.

<select class="chosen" style="width:500px;">
<option>Html</option>
<option>Css</option>
<option>Css3</option>
<option>Php</option>
<option>MySql</option>
<option>Javascript</option>
<option>Jquery</option>
<option>Html5</option>
<option>Wordpress</option>
<option>Joomla</option>
<option>Druple</option>
<option>Json</option>
<option>Angular Js</option>
</select>
</div>
<script type="text/javascript">
$(".chosen").chosen();
</script>

언급URL : https://stackoverflow.com/questions/18796221/creating-a-select-box-with-a-search-option

반응형

'source' 카테고리의 다른 글

WooCommerce에서 모든 주문 상태의 민달팽이와 이름을 얻는 방법은?  (0) 2023.10.14
glibc의 fclose(NULL)이 오류를 반환하지 않고 세그먼트화 오류를 발생시키는 이유는 무엇입니까?  (0) 2023.10.14
예외:'닫힘'을(를) 직렬화할 수 없습니다.  (0) 2023.10.14
반복 합계에 우커머스 구독 사용자 지정 수수료 추가  (0) 2023.10.14
운영 중인 도커 컨테이너의 확장 방법  (0) 2023.10.14

'source'의 다른글

  • 현재글검색 옵션을 사용하여 선택 상자 만들기

관련글

댓글

티스토리툴바