<!doctype html><htmllang="ko"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>jQuery UI Autocomplete - Scrollable results</title><linkrel="stylesheet"href="./jquery-ui.css"><scriptsrc="./jquery-1.12.4.js"></script><scriptsrc="./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>functionreadTextFile(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) {
returnfalse;
},
// 아래는 검색어 선택시 form 을 submit 해서 검색쪽으로 넘기게 됩니다.// 필요없으시면 주석처리하세요...
select: function(event, ui) {
signform.key.value = ui.item.value;
signform.submit();
}
});
});
</script></head><body><formname="signform"method="post"action="/go"><divclass="ui-widget"><labelfor="tags">Tags: </label><inputname="key"id="tags"autocomplete="off"></div></form></body></html>
필요한 파일은 압축해서 전부 첨부해 놓았습니다.
아래 사이트 가시면 옵션들이 있는데 더 필요한 기능들은 추가하시면 됩니다.
word.txt 란 파일에 규격대로 데이터 넣으시면 됩니다.
문자에는 슬래시(\), 따옴표(") 절대 안됩니다. 제거해서 넣으세요
출처 : http://jqueryui.com/autocomplete/#maxheight
|
|
번 호
카테고리
제 목
이름
조회수
Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.05872 초 to webmaster... gogo sea. gogo sea.
살인!
javascript/jquery
