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

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

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

 

jqueryui.com/autocomplete/

Autocomplete | jQuery UI

이용하시거나 아니면 구글 검색하여 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