jQuery 플러그인은 입력 및 자동 일치 드롭다운 상자를 구현합니다.

자동 매칭 기능이 있는 입력 + 드롭다운 상자를 구현하기 위해 다음 방법을 시도했습니다.

1. h5의 새로운 태그

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

장점: js 코드 저장

단점: IE 9 이하 및 Safari는

2. select2 플러그를 사용하세요. jQuery 기반(select2.css 및 select2.js 도입 필요)에서 코드의 html 부분은 다음과 같습니다.

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

js 부분 코드는 다음과 같습니다:

$('.select2_test').select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});

참고: 부트스트랩의 Modal 모달 상자와 함께 사용할 경우 드롭다운이 나타나는 문제가 있습니다. 목록이 마스크 레이어 하단에 나타나고 팝업 상자 닫기 버튼을 클릭했지만 드롭다운 목록이 사라지지 않습니다. 문제는 select2.css 스타일 시트에 있습니다. 🎜>

이유: 입력 상자를 클릭하면 이 플러그인은 마스크 레이어(클래스 이름.select2-drop-mask)와 드롭다운 목록(클래스 이름 .select2-drop), 계단식 레이어(z -index) 둘 중 9991, 9992인데 모달 팝업 상자의 캐스케이딩이 10000보다 커서 위의 두 가지 문제가 발생합니다

해결책 : . select2-drop-mask 및 .select2-drop을 각각 19991 및 19992로 설정하면 드롭다운 목록이 성공적으로 표시되지만, 드롭다운 목록이 열려 있는 동안 모달 팝업 상자의 닫기 버튼을 클릭하면, 먼저 드롭다운 상자를 취소하고 다시 클릭하여 팝업 창을 닫습니다. 여기서는 닫기 버튼의 Z-색인을 늘릴 수 있습니다. 요소는 모달 팝업 상자일 수 없습니다. 그렇지 않으면 증가된 Z-색인이 유효하지 않게 됩니다.

3. 위의 select2.js 불편함의 주된 이유는 select2-drop의 포커스 상실이 select2-drop-mask를 클릭해야만 발생할 수 있다는 것입니다. 여기서는 이 메커니즘을 개선합니다. 또 다른 jQuery 기반 드롭다운 검색 상자 플러그인인 Magicsuggest(magicsuggest.css와 Magicsuggest.js를 동시에 도입해야 함), html 부분은 직접적으로 매우 간단합니다.

코드의 js 부분은 다음과 같습니다.

$('#magicsuggest').magicSuggest({
　　placeholder:''，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: ['Paris', 'New York', 'Gotham']
});

선택

단점: 있음 중복된 스타일(그림자, 강조 표시, 오류 프롬프트, 다중 선택)이 많으며 특정 필요에 따라 스타일을 조정해야 합니다. 데이터가 너무 많으면 로딩이 지연됩니다

4. 위 기본 플러그인은 다중 선택 스타일이므로 사용 시 태그에서 값을 직접 가져올 수 없습니다. 프로젝트에서 제가 개인적으로 선택한 플러그인을 추천합니다. ( selected.css 와 selected.js 를 동시에 도입해야 합니다.) 코드의 html 부분은 다음과 같습니다.

<select data-placeholder="Type &#39;C&#39; to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select>

코드의 js 부분은 다음과 같습니다. ：

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
}

참고: bootstrap의 Modal 모달 상자에서는 드롭다운 목록이 표시되지 않으며 .modal-body 오른쪽에 스크롤 막대가 나타나는 이유는 bootstrap이 .modal-body에 대한 기본 스타일인 Overflow-y:auto를 설정하기 때문입니다. , 따라서 해결책은 이를 덮기 위해 .modal-body에 Overflow-y:visible 스타일을 추가하는 것입니다.

관련 라벨：

jquery

원천：php.cn

이전 기사：js를 사용하여 블로그 보상 기능 구현 다음 기사：JS에서 Split()을 사용하는 방법(지정된 기호에 따라 문자열을 배열로 분할)

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• HTML에서 굵게, 기울임꼴, 밑줄, 취소선 등 글꼴 효과를 설정하는 예를 소개합니다.
  1970-01-01 08:00:00
• Java 버전의 Redis 구현
  1970-01-01 08:00:00
• 가장 간단한 WeChat 애플릿 데모
  1970-01-01 08:00:00
• Python에서 pandas.DataFrame(생성, 색인, 추가 및 삭제)의 간단한 작업 방법 소개
  1970-01-01 08:00:00
• 위챗 미니 프로그램: 탭 효과 구현 방법 예시
  1970-01-01 08:00:00
• Python은 사전 구조 출력을 아름답게 하기 위해 사용자 정의 메소드를 구성합니다.
  1970-01-01 08:00:00
• HTML5: Canvas를 사용하여 실시간으로 비디오 처리
  1970-01-01 08:00:00
• Asp.net은 SignalR을 사용하여 사진을 보냅니다.
  1970-01-01 08:00:00
• WeChat Mini 프로그램 개발 튜토리얼-App() 및 Page() 기능 개요
  1970-01-01 08:00:00
• Python Redis 사용법에 대한 자세한 설명
  1970-01-01 08:00:00

최신 이슈

Nuxt.js에 jQuery를 설치하는 단계 프로젝트에 jQuery를 추가하려고 하는데 정의되지 않았다는 오류가 발생합니다. 플러그인:[{src:'~/plugins/js/svgSprite.js',mode:'...

에서 2023-11-06 16:41:50

0

1

225

데이터 속성을 가져올 때 jQuery가 잘못된 값을 얻음 데이터 속성이 <divclass='p1'data-location='1'></div> 인 div가 있습니다. 다음과 같은 스크립트가 있습니다 ...

에서 2023-11-01 23:01:19

0

1

209

jQuery의 전송 인코딩 지원: 청크 저는 웹 개발자입니다. 내 스크립트에서는 "Transfer-Encoding:chunked"를 설정하기 위해 header()를 사용합니다. 웹페이...

에서 2023-10-25 23:44:37

0

1

230

JavaScript 또는 jQuery를 사용하여 이미지의 자연스러운 크기를 얻는 방법은 무엇입니까? 지금까지 다음 코드가 있습니다. varimg=document.getElementById('draggable'); varwidth=img.clientWidth; v...

에서 2023-10-21 13:53:08

0

2

275

텍스트 영역 자동 확장 간단한 자동 확장 텍스트 영역을 만들려고 합니다. 이것은 내 코드입니다: textarea.onkeyup=function(){textarea.style.height...

에서 2023-10-21 08:49:23

0

2

225

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• 입력창을 클릭했는데 커서가 없으면 어떻게 해야 하나요?

인기 추천

• js는 무슨 뜻인가요?
• js에서 문자열을 배열로 변환하는 방법은 무엇입니까?
• 자바스크립트를 사용하여 페이지를 새로 고치는 방법
• js 배열에서 항목을 삭제하는 방법
• sqrt 함수를 사용하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1403865
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4232681
• 
  JAVA 초보자용 비디오 튜토리얼

  2424007
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  498605
• 
  PHP 제로 기반 입문 튜토리얼

  835070

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1403865 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2424007 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  498605 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  214224 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  860365 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  4764 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  3698 학습 시간
• 
  Go 언어 실습 GraphQL

  3175 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  563 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  16287 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

회사 소개 부인 성명 Sitemap

PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！