박서희연구소

[문제] 개발하는 쇼핑몰 프로젝트의 Front 단 검색창 개발 중 Autocomplete(자동완성) 기능이 필요하다. [목표] jQuery 의 Autocomplete 기능을 적용해본다. Autocomplete 입력 필드에 타이핑 시 자동으로 남은 검색어를 완성해 표시해 주는 기능을 보통 자동완성 이라고 하는데, 이러한 기능을 jQuery UI 에서 이미 구현을 해놨는데, Autocomplete 라고 부른다. [해결] 환경 : JQuery 라이브러리 사용 방법 및 구현 방법 필요한 css 및 js 파일 html) 1. 배열 안에서 사용법 JavaScript) // 배열을 선언하여 사용하는 방식 $(function() { var searchSource = ['엽기떡볶이', '신전떡볶이', '걸작떡볶이', '..

[문제] jQuery 를 사용하던 중, Select box 의 제어가 필요하다. [목표] jQuery 를 사용해, Select box 를 제어하는 방법을 알아본다. [해결] Select box(셀렉트 박스) 선택 값 제어 // Select box ID 로 접근하여 선택된 값 읽기 $('#Select box ID option:selected').val(); // Select box Name 으로 접근하여 선택된 값 읽기 $('select[name=Select box Name]').val(); // span 과 같은 다른 태그 접근하기 $('span[name=Name값]').text(); // 선택된 값의 index 불러오기 var index = $('#Select box ID option').index($..

[문제] jQuery 를 사용하던 중, Class 의 제어가 필요하다. [목표] jQuery 를 사용해, Class 를 제어하는 방법을 알아본다. [해결] 1. Class 변경 및 추가, 제거 // 클래스 변경 $(this).attr('class', 'class_name'); // 클래스 추가 $(this).addClass('class_name'); // 클래스 제거 $(this).removeClass('class_name'); 2. 실제 사용 예 $('#btn').click(function() { $('#check-design').addClass('checkbox'); $('#check-design').removeClass('check-checked'); return false; }); - 끝 -