jQuery UI는 이메일 입력 프롬프트 example_jquery를 구현합니다.

효과:

코드 복사 코드는 다음과 같습니다.

사용 가져올 Jquery UI, js 및 CSS:







<script>var emails=["163.com","yahoo .com ","yahoo.cn","126.com","sina.com"]; <br>$( function () { <br>//입력 상자에 대한 이벤트 바인딩<br>$( "# email" ).keyup( function(){ <br>emailInp(); <br>}); <br>}); <br>function emailiInp(){ <br>var arrs= new Array() <br> inpVal= $( "#email" ).val(); <br>//입력된 값을 기반으로 드롭다운 목록을 동적으로 생성합니다. <br>$.each(emails, function (index,info){ <br> if (inpVal.indexOf("@" )==-1) <br>{ <br>//입력 없음 @ <br>arrs[index]=inpVal "@" info; <br>} else { <br> //입력 @ <br>arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" )) "@" info <br>} <br>}) <br>$( "#email" ).autocomplete( { <br>//드롭다운 목록 콘텐츠 바인딩<br>source: arrs <br>}) <br>} <br></script>
마지막으로 텍스트 상자: