본문 바로가기
노마드 노트

select태그 ui/ux 불편할때 jQuery 자동완성 코드 Autocomplete 해결하기

by 이영훈 태천인(이영훈) 2021. 3. 10.
728x90

select 태그 사용할 때 정말 많은 리스트들이 있을 경우 정말 UI/UX 여러모로 불편한 점들이 있습니다.

그래서 제가 생각했던것인 텍스트 박스로 이용하여 자동완성으로 해결하자 였습니다.

 

jqueryui.com/autocomplete/

 

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

댓글0