선택 옵션

Question

의 기본 텍스트 아래에 추가 정보 아래 코드 조각과 같은 선택 옵션 목록을 생성하기 위해 select2을 사용했습니다. 무엇 내가 원하는

$(function(){ 
 
    $(".select2").select2(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/> 
 

 
<div class="form-group"> 
 
    <label>Minimal</label> 
 
    <select class="form-control select2" style="width: 100%;"> 
 
     <option selected="selected">Alabama</option> 
 
     <option>Alaska</option> 
 
     <option>California</option> 
 
     <option>Delaware</option> 
 
     <option>Tennessee</option> 
 
     <option>Texas</option> 
 
     <option>Washington</option> 
 
    </select> 
 
</div> 
 
     
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

도 검색 가능한 본문 아래에 서브 텍스트. 값이 Alabama 인 옵션을 검색하려면 Okay1을 입력해야하지만 다른 한편으로는 값이 Alabama 인 검색 만하고 싶습니다. 이러한 종류의 동작을 지원하는 select2 옵션 라이브러리 이외의 플러그인이 있습니까? 당신은 할 수

<div class="form-group"> 
    <label>Minimal</label> 
    <select class="form-control select2" style="width: 100%;"> 
     <option selected="selected">Alabama&nbsp&nbsp<h4 style="color: grey">Okay1</h4></option> 
     <option>Alaska&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option> 
     <option>California&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option> 
     <option>Delaware&nbsp&nbsp<h4 style="color: grey">Okay3</h4></option> 
     <option>Tennessee&nbsp&nbsp<h4 style="color: grey">Okay4</h4></option> 
     <option>Texas&nbsp&nbsp<h4 style="color: grey">Okay5</h4></option> 
     <option>Washington&nbsp&nbsp<h4 style="color: grey">Okay6</h4></option> 
    </select> 
</div> 

Answer 1

:

나는 아래의 코드처럼 시도했지만, 그 잘 작동하지 않았다 (아래 내가 결과를 예상 이미지입니다)

• <option> 요소의 속성으로 보조 속성을 인 코드하십시오.
• 를 사용하십시오
  :기능, formatCustomdata-foo에 저장 보조 속성과 상태 모토를 사용하여, 예를 들어 작업

아래, 당신은 상태 이름이나 모토로 검색 할 수 있습니다 참조 custom formatter 기능을 사용

아래 코드에서 matchCustom 참조

$(function(){ 
 
    $(".select2").select2({ 
 
     matcher: matchCustom, 
 
     templateResult: formatCustom 
 
    }); 
 
}) 
 

 
function stringMatch(term, candidate) { 
 
    return candidate && candidate.toLowerCase().indexOf(term.toLowerCase()) >= 0; 
 
} 
 

 
function matchCustom(params, data) { 
 
    // If there are no search terms, return all of the data 
 
    if ($.trim(params.term) === '') { 
 
     return data; 
 
    } 
 
    // Do not display the item if there is no 'text' property 
 
    if (typeof data.text === 'undefined') { 
 
     return null; 
 
    } 
 
    // Match text of option 
 
    if (stringMatch(params.term, data.text)) { 
 
     return data; 
 
    } 
 
    // Match attribute "data-foo" of option 
 
    if (stringMatch(params.term, $(data.element).attr('data-foo'))) { 
 
     return data; 
 
    } 
 
    // Return `null` if the term should not be displayed 
 
    return null; 
 
} 
 

 
function formatCustom(state) { 
 
    return $(
 
     '<div><div>' + state.text + '</div><div class="foo">' 
 
      + $(state.element).attr('data-foo') 
 
      + '</div></div>' 
 
    ); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/> 
 
<style> 
 
.foo { color: #808080; text-size: smaller; } 
 
</style> 
 

 
<div class="form-group"> 
 
    <label>Minimal</label> 
 
    <select class="form-control select2" style="width: 100%;"> 
 
     <option selected="selected" data-foo="We dare to defend our rights">Alabama</option> 
 
     <option data-foo="North to the Future">Alaska</option> 
 
     <option data-foo="Eureka">California</option> 
 
     <option data-foo="Liberty and Independence">Delaware</option> 
 
     <option data-foo="Agriculture and Commerce">Tennessee</option> 
 
     <option data-foo="Friendship">Texas</option> 
 
     <option data-foo="Bye and bye">Washington</option> 
 
    </select> 
 
</div> 
 
     
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

Answer 2

나는 Bootstrap-select을 사용합니다. 훌륭한 도서관이고 이미 원하는 모든 일을합니다. 그들이 말하는대로 바퀴를 재발 명할 필요가 없습니다!

상자에서 제목과 설명을 모두 검색 할 수 있습니다.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-group "> 
       <label>Minimal</label> 
       <select class="selectpicker form-control" data-live-search="true" title="Search title or description..."> 
        <option data-subtext="description 1">Alaska</option> 
        <option data-subtext="description 2">California</option> 
        <option data-subtext="description 3">Delaware</option> 
        <option data-subtext="description 4">Tennessee</option> 
        <option data-subtext="description 5">Texas</option> 
        <option data-subtext="description 6">Washington</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.dropdown-menu > li > a { 
    font-weight: 700; 
    padding: 10px 20px; 
} 

.bootstrap-select.btn-group .dropdown-menu li small { 
    display: block; 
    padding: 6px 0 0 0; 
    font-weight: 100; 
} 

Here is a fiddle with a little bit of customisation