728x90
select 태그 사용할 때 정말 많은 리스트들이 있을 경우 정말 UI/UX 여러모로 불편한 점들이 있습니다.
그래서 제가 생각했던것인 텍스트 박스로 이용하여 자동완성으로 해결하자 였습니다.
Autocomplete | jQuery UI
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr
jqueryui.com
이용하시거나 아니면 구글 검색하여 jQuery Autocomplete 검색만 해도 자료는 많습니다.
저 같은경우 이건 음 엄청 오래된 자료라 지금은 먹힐지 모르겠네요
옛날에 사용했던것으로 문서화하려고 올리겠습니다.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.auto-complete.js"></script>
$(function(){
$('#hero-demo').autoComplete({
minChars: 0,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [ 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
}
});
});
깃주소 : github.com/leeve5/jQuery-Autocomplete.git
728x90
'복붙 노트' 카테고리의 다른 글
개발자가 꼭 쓰는 우편번호 주소 검색 API 서비스 두곳! (2) | 2021.03.29 |
---|---|
마리아디비 (MariaDB) 원격 디비 접속 구축 하는 방법! (0) | 2021.03.24 |
select태그 ui/ux 불편할때 jQuery 자동완성 코드 Autocomplete 해결하기 (0) | 2021.03.10 |
PHP CLI 명령어로 shell_exec함수와 MySQL백업 하는 방법!! (0) | 2021.03.08 |
복사 붙여 넣기만 해도 APM,PHP,워드프레스 웹서버 구축하기 (0) | 2021.03.05 |
맥(Mac) 에서 PHP웹서버 (APM[apach PHP Mariadb]) 셋팅 하는 방법 (0) | 2021.03.02 |
댓글0