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

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

1. h5의 새로운 태그 fc86e7b705049fc9d4fccc89a2e80ee3를 직접 사용하면 해당 데모는 다음과 같습니다. :

<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는 fc86e7b705049fc9d4fccc89a2e80ee3 태그(여러 브라우저에서 지원하지 않는 것 같습니다.) 입력 상자나 드롭다운 아이콘을 반복적으로 클릭하면 드롭다운 목록을 복원할 수 없습니다.

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 부분은 직접적으로 매우 간단합니다.

ee4c45cf54483bcbeeb7b38dff558a3216b28748ea4df4d9c2150843fecfba68

코드의 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. 위 기본 플러그인은 다중 선택 스타일이므로 사용 시 221f08282418e2996498697df914ce4e 태그에서 값을 직접 가져올 수 없습니다. 프로젝트에서 제가 개인적으로 선택한 플러그인을 추천합니다. ( 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 스타일을 추가하는 것입니다.