내 스타일, 먼저 렌더링을 소개합시다. 꽤 좋다고 생각되면 구현 코드를 참조하십시오.
말도 안되는 말을하지 말고 먼저 div 계층을 보자.
<!-가장 바깥 쪽 div는 자식 요소의 너비를 정의하기 위해 언제든지 지정할 수 있습니다-> <div> <!-형식 레이블 텍스트 추가 텍스트 추가-> <라벨에 대한 레이블 ""> 전체 텍스트 검색 </label> <!-호스트를위한 여러 선택은 미래에 동적으로 추가되는 스팬을 사용하는 데 사용되며 사용자 입력을받을 수 있습니다. type = "text"name = "hint-search"value = ""placeholder = "키워드를 선택하거나 탭을 눌러서 키워드를 눌러 입력하십시오"> </div> <!-드롭 다운 목록 열-> <div> <!-JSON 데이터 패킷에 따라 LI를 동적으로 추가하십시오 .-> <ul> </ul> </div>
DOM 구조 주석을 명확하게 설명 할 수 있습니다. CSS를 살펴 보겠습니다.
* {Box-Sizize : Border-Box;}. 힌트 입력-스팬-컨테이너 {ridth : 100%; 배경색; 배경색 : #ffff; 테두리 : 1px solid #ccc; box-shadow : 삽입 0 1px 1px rgba (0, 0, 0, 0, 0.075); inline-block; padding : 255; vertical-align : #555; 1px; max-width : 100%; 라인-높이 : 30px;}. 10px; 패딩 : 4px 6px; 경계 : 없음; 텍스트-샤로 : 없음; 텍스트-샤로 : 없음; 국경-라디우스 : 3px; 글꼴-웨스트 : 200;}. 레이블-프리 마리 {배경 : #2693ff; 컬러 : 흰색;}. White;}. 태그 [data-lole = "remove"] {margin-left : 2px; cursor : pointer;} 입력 [name = 'hint-search'] {border : none; box-shadow : none; background-color : 투명; 패딩; 패딩 : 0; 마진 : 0; 너비 : 100%: max-width : hintock {위치; 100px; max-height : 120px; 배경색 : #ffff; 오버플로 : 자동; 디스플레이 : 없음; z-index : 9999;}. Li : 호버 {배경색 : #eee;}CSS의 경계 크기 : Border-Box를 설정하는 것이 중요합니다. 이 속성은 패딩과 테두리 계산을 너비로 만들 수 있습니다.
.hint-input-span-container 디스플레이를 인라인 블록으로 설정하는 것이 중요합니다. 태그 목록이 있습니다.
.hint-block은 z-index를 9999로 설정하여 프론트 엔드에 표시를 보장하고 위치를 보장하기 위해 위치가 절대적입니다.
다른 모든 것은 귀하의 요구에 따라 조정될 수 있습니다
아래 JS 코드를 보자
$ () {// json data packet var data = {data : [ "123", "Hello Beijing", "Beijing Welcome", "Beijing Good", "Ocean", "Ocean Guangli Bureau", "I Lalala", "I lalala", "Institution", "일본", "일본" Mountain ","Ethiopia ","Ibaka ","Bibi "]}; // 나중에 여러 번 호출 해야하는 DOM 객체를 얻습니다. var $ hintsearch = $ ("input [name = 'hint-search'] "); var $ hintsearchcontainer = $ (". hint-input-span-container "); var $ hintblock = $ (". ". $ ( ". hint-ul"); // 사전 추가 AddDictionary (data.data, addullistener); // 사전 목록 세트 너비 세트 width sethintsearchContainerWidth (); // eventize $ (창). Focus $ hintsearch.focus (function () {animtendown ();}); // 초점을 잃어버린 초점을 잃어버린 초점 설정 클릭을 들으려면 hintsearch.blur (function () {function () {animateup (}, 200);}); // 탭의 두 키를 말하고 입력 할 때 입력해야합니다. 버블 링 및 전환 초점 $ hintsearch.keydown (e) {switch (e.which) {case 9 : case 13 : {var text = $ hintsearch.val (); if (! $. trim (text)) {$ hintsearch.val ( "); e.preventDefault (); return;} if (text) {$ hintsearch.before ( '<span>' + text + '<i data-role="remove"></i><i></i></i></span>');addSpanListenr();}//console.log($hintSearch.val());$hintSearch.val("");$hintSearch.focus();e.preventDefault();break;}default: ;}});//Detection input 문자열이 포함 된 경우 // Li의 입력 내용을 일치 시키면 검색 메소드가 검색 된 배열을 반환하는 한 (e) {var text = $ hintsearch.val (); if (! $ (trim)) {updatedictionar (data.dmatic); data.data.filter (function (x) {return x.indexof (text)! = -1;}) if (tmparr.length === 0) {tmparr.push ( "일치하는 항목 없음");} 업데이트 된 소설 (tmparr, addullistener);}) // 기능 라이브러리가 AddDictionary (datablac) (databer)를위한 공통 라이브러리를 추가합니다. = 0; i <data.length; $ hintul.append ( '<li>'+dataarr [i]+'</li>');} condent function updateDictionary (dataarr, callback) {$ hintul.empty (); Animtedown () {$ hintblock.slidedown ( 'fast'). css ({ 'border': '1px solid #96c8da', 'border-top': '0px', 'box-shadow': '0 2px 3px 0 RGBA (34,36,38, .15) '}); $ hintsearchContainer.css ({'Border ':'1px solid #96c8da ','border-bottom ':'0px ','box-shadow ':'0 2px 3px 0 rgba (34,36,38, .15) ') animateup () {$ hintblock.slideup ( 'fast', function () {$ hintsearchcontainer.css ({ 'border': '1px solid #ccc'});});});} // 입력 함수 checkContainerhas (text) {$; $ (hint-span-span-span-span-span-span-span-span-span-spanectainerhas (text)로 반복되는지 확인하십시오. span "). 각 (function () {if ($ .trim (text) == $ .trim ($ (this) .text ()) {flag = 1; return;}}); 반환 플래그? true;} // 설정 힌트 입력-스팬-컨테이너 너비 함수 set sethintsearchContainerWidth () {var hint_width = $ hintsearchContainer.width () + 2 * parseint ($ hintsearchContainer.css ( 'padding-left'). [0]) [0])) [0]). parseint ($ hintsearchContainer.css ( 'Border-Left'). 매치 (/[0-9]+/) [0]); $ hintblock.css ({ 'width': hint_width});} // 클릭 함수 addUllistener () {$ hintul.delegate ( 'li', function ', fortment', 'li' $ (this) .text (); if (! checkContainerhas (text)) {$ hintsearch.before ( '<span>' + text + '<i data-lole = "remove"> </i> <i> </i> </i> </span>'); addspanlistenr ();} $ hintsearch.val ( "); animateup ()); addSpanListEnr () {$ ( ". 힌트 입력-스팬-컨테이너 스팬"). Delegate ( "i", 'click', function () {$ (this) .parent (). remove ();})})).초점은 jQuery에 따라 이벤트를 듣고 DOM 요소를 운영하는 데 중점을 둡니다.
위의 것은 편집기 (검색 기능 포함)가 소개 한 UI 구성 요소의 입력 다중 선택 풀다운 구현 방법입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!