잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (154)  |  자료실 (20)  |  끄적거림 (520)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 28일
어제와 똑같이 살면서 다른 미래를 기대하는 건 정신병 초기증세다. - 알버트 아인슈타인
 




    javascript/jquery

javascript/jquery - 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete
이 름 : 바다아이   |   조회수 : 2887         짧은 주소 : https://www.bada-ie.com/su/?41591794411
autocomplete.tar.gz - 217 KB   다운수 : 7 회

<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Scrollable results</title>
    <link rel="stylesheet" href="./jquery-ui.css">
    <script src="./jquery-1.12.4.js"></script>
    <script src="./jquery-ui.js"></script>
    <style>
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }

        /* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */

        * html .ui-autocomplete {
            height: 100px;
        }
    </style>
    <script>
        function readTextFile(file) {
            var ss = "";
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file, false);
            rawFile.onreadystatechange = function() {
                if (rawFile.readyState === 4) {
                    if (rawFile.status === 200 || rawFile.status == 0) {
                        var allText = rawFile.responseText;
                        ss = allText;
                        // alert(allText);		
                    }
                }
            }

            rawFile.send(null);
            return ss;
        }

        $(function() {
            // word.txt 파일에는 따옴표(")와 역슬래시(\)를 각 프로그램으로 가공해 반드시 제거하여 넣어놓으세요.
            var availableTags = eval(readTextFile("./word.txt"));

            $("#tags").autocomplete({
                source: availableTags,
                // 이게 없으면 한글 선택시 검색어들이 사라져요.. 그냥 두세요..
                focus: function(event, ui) {
                    return false;
                },
                // 아래는 검색어 선택시 form 을 submit 해서 검색쪽으로 넘기게 됩니다.
                // 필요없으시면 주석처리하세요...
                select: function(event, ui) {
                    signform.key.value = ui.item.value;
                    signform.submit();
                }
            });
        });
    </script>
</head>

<body>
    <form name="signform" method="post" action="/go">
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input name="key" id="tags" autocomplete="off">
        </div>
    </form>
</body>

</html>

필요한 파일은 압축해서 전부 첨부해 놓았습니다.
아래 사이트 가시면 옵션들이 있는데 더 필요한 기능들은 추가하시면 됩니다.
word.txt 란 파일에 규격대로 데이터 넣으시면 됩니다. 
문자에는 슬래시(\), 따옴표(") 절대 안됩니다. 제거해서 넣으세요

출처 : http://jqueryui.com/autocomplete/#maxheight
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript , ... 바다아이 281
73 javascript/jquery , cookie class 바다아이 834
72 javascript/jquery select 3 바다아이 1249
71 javascript/jquery , ... 바다아이 1764
70 javascript/jquery , timezone, , ... moment.js 바다아이 1890
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 1818
68 javascript/jquery (block) , ... 바다아이 1760
67 javascript/jquery textarea cursor , , focus 바다아이 2364
66 javascript/jquery jquery ajax option .... 바다아이 1974
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 2036
64 javascript/jquery javascript , , , , () 바다아이 2131
63 javascript/jquery javascript (date ) 바다아이 2221
62 javascript/jquery CSS3 javascript 바다아이 2397
61 javascript/jquery javascript , cookie, , , , , 바다아이 2296
60 javascript/jquery javascript 바다아이 2610
59 javascript/jquery javascript / , , , 바다아이 2837
58 javascript/jquery url , , encode, decode ... 바다아이 2109
57 javascript/jquery javascript ... frame location.href 바다아이 2226
56 javascript/jquery File Upload Progress, .... . 바다아이 2568
55 javascript/jquery javascript, json , json Highlight 바다아이 2583
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 2666
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 2403
52 javascript/jquery javascript entity , , encode, decode 바다아이 2707
51 javascript/jquery javascript post, get , 바다아이 3913
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 2787
49 javascript/jquery jquery autocomplete , , . 바다아이 2544
현재글 javascript/jquery javascript, jquery, , autocomplete 바다아이 2888
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 2641
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 2284
45 javascript/jquery url encode decode , , , javascript 바다아이 3491
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : vultr.com 서울  실행시간 : 0.25288
to webmaster... gogo sea. gogo sea.