JQuery Select Box 구성 요소 - 선택한 대 Select2

이 기사는 Martín Martínez와 Chris Perry가 검토 한 동료입니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 동료 검토 자 덕분에! 프로젝트에서 일한 적이 있습니까? 시각적으로 무언가가 벗어난 것처럼 보였습니까? 아마도 프로젝트가 거의 끝났지 만 일부 요소는 그렇게 좋아 보이지 않았습니까? 이것들은 작은 세부 사항 일지 모르지만 차이를 만듭니다.

프로젝트에 매력적이지 않은 선택 상자가 포함되어 있고 더 많은 기능을 추가하려는 경우 선택한 것으로 선택되어 있으며 Select2는 매우 유용합니다. 이들은 선택된 상자를 스타일링하여 모양을 향상시키고 동작을 사용자 정의하고보다 사용자 친화적으로 만드는 두 개의 jQuery 플러그인입니다. 이 기사에서는이 두 플러그인을 머리를 대고하고 기능과 사용 사례를 비교하여 귀하에게 가장 적합한 정보를 선택할 수 있도록합니다. . 키 테이크 아웃 선택한 select2는 선택된 상자의 기능을 향상시켜 외관과 사용자 친화 성을 향상시키는 jQuery 플러그인입니다. 선택한 것은 신뢰할 수 있고 강력한 플러그인이지만 Select2만큼 적극적으로 유지 관리되지 않으므로 정기적으로 새로운 기능과 통합을 추가합니다. 두 플러그인 모두 자리 표시 자 텍스트를 지원하고 옵션 내에서 검색을 허용하며 선택 수를 제한 할 수있는 기능을 제공합니다. 그러나 select2는 드롭 다운이 열릴 때 선택치 옵션을 선택할 수있는 옵션을 제공합니다. 선택은 아직 선택되지 않은 기능입니다. Select2는 프로그래밍 방식 액세스, 태깅, 토큰 화 및 템플릿을 포함한 추가 기능으로 두드러집니다. 또한 AJAX를 지원하고보다 고급 사용자 정의 옵션을 제공하므로 일부 상자를위한보다 강력한 도구입니다. 선택한 것은 기본 Select Box 향상을위한 좋은 옵션이지만 더 고급 기능 및 일반 업데이트에는 Select2가 권장됩니다. Select2는 또한 포괄적 인 문서를 제공하여 프로젝트에서 더 쉽게 구현하고 사용할 수 있습니다.

설치 선택과 Select2는 모두 github를 통해 사용할 수 있습니다. 즉, 해당 리포지토리를 복제하고 필요한 파일을 얻을 수 있습니다.

그렇지 않으면 Bower (GitHub의 인터페이스 역할을하는)로 두 플러그인을 설치할 수 있습니다. Bower가 선호하는 경로라면 jQuery를 잡을 수도 있습니다.

그렇지 않으면 선택한 CDN (예 : CDNJ)에서 파일을 가져 와서 일반적인 방식으로 페이지에 포함시킵니다. 이것이 아래 템플릿에서 한 작업으로,이를 사용하여 튜토리얼의 예제를 따라갈 수 있습니다.

선택한

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

select2

프로젝트는 적극적으로 유지됩니까? GitHub 페이지를 방문하여 알 수 있듯이 선택한 플러그인의 개발은 한때만큼 활성화되지 않았으며 2014 년 2 월 6 일부터 선택한 날짜의 최신 버전입니다. 라이브러리가 있었다고 말하는 것은 아닙니다. 버려진 - 멀리! 오히려 개발자들은 원하는 곳으로 가져 왔으며 신뢰할 수 있고 강력한 플러그인으로 남아 있습니다.

. 반면에 select2와 대조되는 것은 그 차이가 눈에 띄는 것입니다. 이 라이브러리의 개발은 앞서 나가고 있으며 최근 공식 네 번째 버전 (4.0.0)을 발표했습니다. 이는 다른 기능이 추가되고 다른 기능이 추가되고 다른 기능이 추가되고 있음을 의미합니다.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

또 다른 유용한 메트릭은 스택 오버플로 에이 태그가있는 질문의 양일 수 있습니다. 여기에서 직접 시도해 볼 수 있습니다 : http://stackoverflow.com/tags "select2"를 입력 한 다음 "선택한"을 대조하면 Select2 플러그인 주변에 훨씬 더 많은 활동이있는 것 같습니다. 또한 AngularJS 및 Ruby on Rails와 같은 많은 통합이 있음을 알 수 있습니다.

선택 상자 및 자리 표시자를 선택하십시오 select2 및 선택한 변경 간단하고 여러 선택된 상자가 나타나는 방식으로 변경됩니다.

순수한 HTML이있는 여러 선택 상자에서 사용자는 목록에서 사용 가능한 일부 옵션을 볼 수 있습니다. 이것은 시각적으로 매력적이지 않으며이 견해에 대한 변화가 이루어져야합니다. 선택 및 select2 "목록보기"를 제거하면 선택 상자 내부를 클릭하면 옵션 목록이 나타납니다. 그래야만 선택할 수 있습니다.

두 플러그인으로 옵션을 검색 할 수 있습니다. 상자 안쪽을 클릭 한 다음 선택한 첫 번째 문자를 입력하면 검색에 따라 결과가 실시간으로 나타납니다.

. Select2를 사용하면 이미 선택한 옵션을 쉽게 선택 해제 할 수 있습니다. 드롭 다운이 열리면 선택한 요소를 클릭하여 선택 해제 할 수 있습니다. 선택한 기능은 아직이 기능을 구현하지 않았습니다 선택 및 select2 단일 및 다중 선택 상자에 대한 자리 표시 자 텍스트를 지원합니다. 제한된 선택 수 때때로 여러 선택 상자에서 사용자가 선택한 옵션 수를 제한해야합니다. 선택한 및 select2를 사용하는 장점은 선택 수를 매우 쉽게 변경할 수 있다는 것입니다.

당신은 두 플러그인을 사용하여 멀티 선택 상자에서 선택할 수있는 선택 수를 제한 할 수 있지만, 선택한이 기능의 버전이 더 발전했다는 점에 주목할 가치가 있습니다. 한도에 도달 한 후 추가 옵션을 선택하려고하면 이벤트가 호출됩니다.

이 예에서 사용자는 일주일에 가장 생산적인 이틀을 선택해야합니다. 그들이 셋째 날을 선택하려고 할 때, 선택된 것은 이벤트에 전화합니다. 한계에 도달했음을 보여주는 경고를 추가하도록 선택했습니다. Codepen에서 SitePoint (@SitePoint) By SitePoint (@SitePoint)에 의해 선택된 vs select2를 펜 제한 수를 참조하십시오. 응답 디자인 사람들은 모든 종류의 장치에서 귀하의 페이지를 볼 수 있으므로 웹 사이트의 다른 구성 요소와 마찬가지로 상자를 선택하십시오. 선택 및 Select2는 백분율로 설정 너비를 지원하며 기능은 두 가지 모두에서 거의 동일합니다. 이를 통해 화면 크기 또는 브라우저 창 폭을 고려한 반응 형 선택 상자를 만들 수 있습니다. 이 기능에 대해 선택한 유일한 차이점은 코드입니다. HTML에서 Select2의 너비 내부에서 Select Tag를 선언 할 수 있습니다. 선택한 상자를 선택하고 select2로 반응하고 시각적으로 더 잘 만드는 방법을 이해하려면 아래를 참조하십시오.

기타 유사한 기능 선택 및 select2에는 다른 일반적인 기능이 있지만 흥미로운 결과를 발견 한 세 가지 기능, 즉 비활성화 결과, 숨겨진 검색 상자 및 RTL (Right-to-Left) 지원을 살펴보고 싶습니다. 비활성화 된 결과 이 중 가장 흥미로운 것은 비활성화 된 결과입니다. 이 옵션 세트를 사용하여 선택 및 select2 하이라이트 활성화 옵션. 장애가있는 선택을 볼 수 있지만 선택할 수는 없습니다. 비활성화 된 결과는 일반적으로 다른 조건이 충족 될 때까지 사용자가 옵션을 선택하지 못하도록 설정됩니다. 이 기능은 선택 상자를 강력한 도구로 바꾸고 필요에 따라 사용하는 방법을 배우면 사용자와의 참여를 증가시킵니다.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

플러그인에 비활성화 된 결과를 활성화했음을 알리려면이 기능을 사용할 옵션 태그에 속성을 비활성화 한 = "비활성화"를 추가하십시오.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

이 선택된 예제에서 사용자는 지리적 위치에서 사용할 수있는 옵션 만 선택할 수 있지만 사용할 수 없더라도 다른 옵션도 볼 수 있습니다. 선택한 펜 vs select2 : codepen에서 sitepoint (@sitepoint)의 비활성화 결과를 참조하십시오. 검색 상자 숨기기 옵션 목록에 단일 선택 상자의 선택이 많지 않은 경우 검색 창을 숨기는 것이 좋습니다. 선택한 경우 검색 창을 숨기려면 disable_search_threshold를 사용하고 선택 상자의 옵션 수보다 더 큰 값으로 설정해야합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

동일한 논리는 select2에 적용되지만 유일한 변경 사항은 DICABLE_SEARCH_THRESHOLD 대신 용어입니다.이를 MinimumResultsForsearch라고합니다.

select2에 대해 추가 해야하는 한 가지는 선택 상자에 옵션 수에 대해 걱정하지 않고 검색 상자를 영구적으로 숨길 수 있다는 것입니다. MinimumResultsForsearch를 인피니티로 설정하여이를 수행 할 수 있습니다

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

오른쪽에서 왼쪽 (RTL) 지원

많은 웹 사이트가 알파벳이 다른 다른 언어로 작성되며 그 외에도 이러한 언어 중 일부는 다른 방향에서 읽습니다. Select Box는 이러한 언어의 규칙에 따라 조정하고 LTR (왼쪽에서 오른쪽)에서 RTL로 방향을 이동해야합니다. 이는 사용자 경험을 향상시키고 해당 지역의 사용자를위한 웹 사이트의 유용성을 향상시킵니다.

선택 및 select2는 선택된 상자에서 오른쪽에서 왼쪽 기술을 지원합니다. 그들이 가진 유일한 차이점은 select2가 JavaScript 파일에서 RTL 지원을 선언해야한다는 것입니다. 한편 선택한 선택에서 선택한 RTL 클래스를 HTML에서 선택한 클래스와 함께 추가합니다. 왜 선택한 를 선택하십시오 Select2는 선택한 선택에서 영감을 얻었으며 선택된 대부분의 기능이있는 동안 기고자는 거기서 멈추지 않았습니다. 그들은 프로그래밍 방식 액세스, 템플릿, 비활성화 모드, 태깅 및 토큰 화를 포함하여 선택된 상자의 가장 멋진 기능 중 일부를 구축했습니다. 또한 ajax를 지원합니다.

프로그램 액세스 프로그래밍 방식 액세스는 선택 상자를 다른 레벨로 가져갑니다. 그것들은 여러 선택된 상자와 결합하여 매우 유용합니다. JavaScript를 사용하여 규칙에 따라 이러한 선택된 상자에 작동하는 버튼을 추가 할 수 있습니다.

다중 선택 상자의 일부 옵션에 서로 논리가 서로 연결되어 있고 관찰에 따라 이러한 "링크 된"옵션이 많은 사용자로부터 선택할 확률이 큰 경우 이들을 선택하는 것이 유용합니다. 한 번의 클릭으로 선택합니다.

이 예에서는 "iOS 기술"버튼을 클릭하여‘Swift’및‘Objective-C’를 신속하게 설정할 수 있습니다. Codepen에서 Sitepoint (@SitePoint)의 PENTEPOINT (@SitePoint)에 의한 PEN PEN SELECT2 참조.

태깅 태깅은 Select Box를 더욱 강력하게 만들고 일반 선택 상자의 한계를 확장하는 Select2의 또 다른 기능 중 하나입니다. 사용자는 옵션 목록에 전혀없는 새로운 선택을 추가 할 수 있습니다.

태깅은 선택 범위가 매우 크고 옵션 목록에 모든 선택을 입력 할 수는없는 경우에도 매우 편리합니다. 태깅이 활성화되고 사용자가 목록에서 선택을 찾을 수 없으면 선택한 태그를 만듭니다.

선택 상자의 목표에 해당하지 않는 유효하지 않은 태그를 입력하는 "악의적 인"사용자가 오용 할 수 있으므로 태깅을 사용할 때주의하십시오.

태깅을 활성화하려면 태그 옵션을 true로 설정해야합니다.

선택한 펜 대 Select2 : Codepen에서 sitepoint (@sitepoint)에 의해 태그를 표시합니다. 토큰 화

일단 태그가 true로 설정되면 토큰 분리기를 포함시키는 옵션을 사용할 수 있습니다. 태그 이름을 입력 한 후 지정된 토큰 분리기 중 하나를 입력하십시오. 그런 다음 태그가 옵션 목록에서 선택으로 입력됩니다. 토큰 분리기는 키보드에서 문자를 입력하여 태그를 만들기위한 바로 가기 역할을합니다.

Select2의 도움으로 원하는 문자로 토큰 분리기를 만들 수 있습니다. 다음 예에서는 4 개의 토큰 분리기가 사용된다 : /,,,; 및 ""(공간).

새 옵션을 입력하여 시도한 다음 분리기 문자 중 하나를 선택하여 옵션 목록에 추가하십시오.

Codepen에서 SitePoint (@SitePoint)에 의한 Tokenization 참조. 템플릿

Select2의 가장 강력한 기능 중 하나는 템플릿입니다. 템플릿을 사용하면 select2에 표시된 구성 요소의 모양을 사용자 정의 할 수 있습니다. 이 기능은 옵션 태그에서 제공하는 최소 입력을 이미지 또는 기타 구성 요소와 병합하여 사용자를위한 시각적 디스플레이를 만들 수 있습니다.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

이 예제는 Select2의 템플릿을 Bootstrap의 글리 피콘과 결합합니다 Codepen에서 Sitepoint (@SitePoint)별로 템플릿을 참조하십시오.

결론 선택된 옵션에는 몇 가지 좋은 옵션이 있지만 Select2는 Select Box와 함께 사용할 수있는 기능 측면에서 더 많은 기능을 제공합니다. 선택한 웹 사이트의 "흐름"내에서 결합하면 선택한 좋은 옵션이지만 더 고급 기능에 액세스하려면 Select2가 더 나은 선택입니다.

. 나는 select2를 사용하는 것이 좋습니다. 선택한 것보다 더 자주 업데이트되며 버그가 적습니다. Select2에 대해 매우 도움이 된 한 가지는 문서입니다. 읽는 동안 프로젝트에서 Select2 구성 요소를 즉시 사용할 수 있습니다. 선택한 또는 select2를 사용하여 좋은 경험이 있거나 나쁜 경험이 있다면 아래 의견 섹션에서 알려주십시오. jQuery Select Box 구성 요소에 대한 자주 묻는 질문 (FAQ) 선택한 것과 select2의 주요 차이점은 무엇입니까?

선택 및 select2는 선택된 상자의 기능을 향상시키는 데 사용되는 인기있는 jQuery 플러그인입니다. 그들 사이의 주요 차이점은 그들의 특징과 유용성에 있습니다. Select2는 AJAX를 지원하며,이를 통해 대형 데이터 세트를 사용자 유형으로로드하여 대형 데이터 세트로 작업 할 수 있습니다. 또한 태깅 및 무한 스크롤링을 지원합니다. 반면에 선택한 것은 Ajax 또는 태깅을 지원하지 않지만 사용자 친화적 인 검색 기능과 더 간단한 인터페이스를 제공합니다. 내 프로젝트에서 select2를 구현하려면 어떻게하나요?

select2를 구현하려면 먼저 프로젝트에 Select2 CSS 및 JavaScript 파일을 포함해야합니다. 그런 다음 $ ( ". MySelectBox")를 사용하여 SELECT BOX에서 SELECT2를 초기화 할 수 있습니다. select2 (); 명령. Select2 () 함수로 옵션을 전달하여 Select2의 동작을 사용자 정의 할 수 있습니다.

동일한 프로젝트에서 선택한 선택 및 select2를 함께 사용할 수 있습니까?

선택한 것은 기술적으로 선택한 것과 select2를 모두 사용할 수 있습니다. 같은 프로젝트에서는 일반적으로 권장되지 않습니다. 두 플러그인 모두 선택 상자의 기능을 향상시키는 것을 목표로하며이를 함께 사용하면 충돌과 예기치 않은 동작이 발생할 수 있습니다. 당신의 요구에 가장 적합한 것을 선택하는 것이 가장 좋습니다.

select2의 모양을 사용자 정의하고 선택한 방법은 무엇입니까?

select2와 선택한 CSS를 통해 광범위한 사용자 정의를 허용합니다. 자신의 CSS 파일에서 기본 스타일을 재정의하여 색상, 글꼴, 크기 및 기타 모양을 변경할 수 있습니다.

Select2를 사용하여 큰 데이터 세트를 어떻게 처리합니까? AJAX 지원 덕분에 대형 데이터 세트를 처리하는 데 적합합니다. Select2를 구성하여 사용자 유형으로 데이터를 즉시 가져 오기 위해 모든 데이터를 선불로드 할 필요가 없습니다. 이것은 대형 데이터 세트로 작업 할 때 성능을 크게 향상시킬 수 있습니다.

angular 또는 react와 같은 프레임 워크와 함께 선택하거나 select2를 사용할 수 있습니까?

예, 선택한 및 select2는 각도와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 또는 반응. 그러나 호환성을 보장하기 위해 추가 포장지 또는 라이브러리를 사용해야 할 수도 있습니다.

선택한 검색 기능을 추가하려면 선택한 검색 기능이 내장 검색 기능과 함께 제공됩니다. 선택 상자에서 선택한 초기화하면 검색 창이 자동으로 추가됩니다. 사용자는 선택 상자에 옵션을 필터링하기 위해이 상자에 입력 할 수 있습니다.

Select2 및 선택한 여러 선택을 어떻게 처리하고 선택한가? 선택 상자에 다중 속성을 추가 하여이 기능을 활성화 할 수 있습니다. 여러 선택이 활성화되면 사용자는 선택 상자에서 둘 이상의 옵션을 선택할 수 있습니다.

모바일 장치에서 선택한 또는 select2를 사용할 수 있습니까?

선택한 것과 select2는 데스크탑과 함께 작동하도록 설계되었습니다. 브라우저이지만 모바일 장치에 대한 제한된 지원을 제공합니다. 그러나 다양한 모바일 브라우저와 장치로 인해 일부 기능은 예상대로 작동하지 않을 수 있습니다.

Select2 및 선택한 이벤트를 어떻게 처리하고 선택한가? 듣고 응답 할 수있는 이벤트. 예를 들어, 사용자가 선택할 때마다 변경 이벤트를 듣고 기능을 실행할 수 있습니다. jQuery에서 .on () 메소드를 사용하여 이벤트 리스너를 첨부 할 수 있습니다.

위 내용은 JQuery Select Box 구성 요소 - 선택한 대 Select2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!