jQuery 플러그인은 입력 및 자동 일치 드롭다운 상자를 구현합니다.-JS 튜토리얼-php.cn

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

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 부분 코드는 다음과 같습니다:

$(&#39;.select2_test&#39;).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 부분은 다음과 같습니다.

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

로그인 후 복사

선택

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

4. 위 기본 플러그인은 다중 선택 스타일이므로 사용 시