자동 제안 검색 프롬프트 기능을 위해 javascript:suggestion.js_javascript 트릭을 입력하세요.

코드 복사 코드는 다음과 같습니다.

/**
* 기능: 이 js 파일의 코드는 [자동 검색 프롬프트 입력] 기능을 구현합니다. 예를 들어 Baidu 및 Google 검색 상자에 일부 문자를 입력하면 드롭다운 목록 형태로 몇 가지 프롬프트가 제공됩니다. 사용자 경험 향상
* 사용 지침: presents.txt 파일 참조
* 작성자: sunfei(Sun Fei) 날짜: 2013.08.21
*/
var SugObj = new Object()

$(document).ready(function(){

// 파일이 로드된 후 입력 상자 속성 정보를 얻어 검색 프롬프트 데이터와 텍스트 입력 상자의 데이터 표시 효과가 일치하는지 확인하세요.
//검색 프롬프트 기능 입력 상자 기본 ID 사용
SugObj.keywords_input_id = "keywords_input";
//입력 상자 높이 검색
SugObj.keywords_input_height = $("#" SugObj.keywords_input_id "").height(); 🎜>SugObj.keywords_input_width = $(" #" SugObj.keywords_input_id "").width();
//입력 상자 너비 글꼴 색상 검색
SugObj.keywords_input_color = $("#" SugObj.keywords_input_id "" ).css("color");//입력 상자 너비 글꼴 크기 검색
SugObj.keywords_input_font_size = $("#" SugObj.keywords_input_id "").css("font-size"); >//사용자가 입력한 값
SugObj.keywords_input_value = null

//검색 프롬프트를 표시하는 div의 스타일 설정
//프롬프트 정보를 표시하는 DIV의 ID
SugObj.suggestion_div_id = "sug_layer_div";
// 기본 프롬프트 정보 DIV 스타일
$("#" SugObj.suggestion_div_id "").addClass("sugLayerDiv")//설정 입력 상자에 따른 DIV 너비
$("#" SugObj.suggestion_div_id "").css("width",SugObj.keywords_input_width)
//$("#" SugObj.suggestion_div_id ""). css("position","relative");
//$( "#" SugObj.suggestion_div_id "").css("overflow","hidden");//DIV 콘텐츠가 오버플로되면 숨기기
/ /$("#" SugObj.suggestion_div_id "").css("배경" ,"#fff");//DIV 배경 색상
//$("#" SugObj.suggestion_div_id "").css(" border","#c5dadb 1px solid");//DIV 테두리 스타일
//$("#" SugObj.suggestion_div_id "").css("display","none");//DIV 초기 숨기기

//프롬프트 결과는 기본적으로 프롬프트 수를 표시합니다
SugObj.default_showItem_count = 10;
//"더보기"를 클릭할 때 표시되는 숫자 설정
SugObj.more_showItem_count = 20; 🎜>//상하 키 위치 표시
SugObj.cursor_now_position = -1;
})


//성능 고려 사항: 사용자가 즉시 편지를 전송하는 경우 서버에 대한 부하가 너무 클 것입니다.
//각 요청은 0.5초의 지연을 가지고 전송됩니다(고려 예정)

$(document). Ready(function(){

//입력 상자의 ID는 키워드_입력입니다. 여기서 입력 상자의 keyup 이벤트가 모니터링됩니다
$("#" SugObj.keywords_input_id "").keyup( 함수(이벤트){
if((event.keyCode >= 48 && event.keyCode <=57) || (event.keyCode >= 96 && event.keyCode <= 105) ||
(event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode == 8)) {
// 입력 상자의 값을 가져옵니다. ֵ
var kw = $(" #" SugObj.keywords_input_id "").val();
//입력 문자열 양쪽 끝 공백 제거
kw = kw.replace(/ (^s*)|(s*$)/ g,"");
if (kw == "") {
//DIV 콘텐츠 지우기
$("#" SugObj.suggestion_div_id " ").empty()// DIV 숨기기
$("#" SugObj.suggestion_div_id "").css("display","none");
} else {
/ /사용자 입력 값을 SugObj 개체에 저장
SugObj.keywords_input_value = kw;
//Ajax 요청 결과 실행
runSearchAjax(0)
}
}else if(event.keyCode == 38) { //위쪽 화살표
if (--SugObj.cursor_now_position == -1) {//1씩 감소한 후 텍스트 상자로 이동했는지 확인
$("#" SugObj.keywords_input_id " ").val(SugObj.keywords_input_value );
//프롬프트 결과 스타일 제거 #fff-white
$("#showDataTable tr.line").css("Background","#fff")
}else if (SugObj.cursor_now_position == -2) {//텍스트 상자 뒤의 위쪽 화살표를 눌러 마지막 줄로 이동
//검색 프롬프트 결과 인덱스는 0부터 시작합니다
var index = $ ("#showDataTable tr.line").length - 1;
//검색 제출 결과가 0이면 return
if (index < 0) {
return;
}
//Get 마지막 프롬프트 결과
$("#" SugObj.keywords_input_id "").val($($("#showDataTable tr.line")[index]).text())
$ ($( "#showDataTable tr.line")[index]).siblings().css("배경","#fff").end().css("배경","#c0c0c0")
SugObj. cursor_now_position = index;
}else {
$("#" SugObj.keywords_input_id "").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text ()) ;
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("배경","#fff").end().css("배경 "," #c0c0c0");
}
}else if(event.keyCode == 40) { //아래쪽 화살표
var trCount = $("#showDataTable tr.line").length;
if (SugObj.cursor_now_position == trCount) {//연산 하나 추가 후cursor_now_position 값이 목록 개수 제한을 초과하는지 확인
//초과할 경우 커서_now_position 값을 초기값으로 변경
SugObj.cursor_now_position = - 1;
//텍스트 상자의 값을 사용자 검색으로 설정합니다.
$("#" SugObj.keywords_input_id "").val(SugObj.keywords_input_value)//프롬프트 결과 제거; 스타일
$("#showDataTable tr").css("배경","#fff")
}else {
$("#" SugObj.keywords_input_id "").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text()) //현재 결과 표시 입력 상자
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("배경","#fff").end().css("배경 " ,"#c0c0c0");
}
}//End if
});

//커서가 입력 상자를 벗어나면 검색 프롬프트 숨기기
$( "#" SugObj .keywords_input_id "").blur(function(){

var intId = window.setInterval(function(){
$("#" SugObj.suggestion_div_id "").css( "표시", "없음");
window.clearInterval(intId);
},200)

$("#" SugObj.suggestion_div_id " tr.line").click( function(){
window.clearInterval(intId);
$("#" SugObj.keywords_input_id "").val($(this).text())
$("#" SugObj .keywords_input_id "" ).focus();
SugObj.cursor_now_position = -1;
runSearchAjax(0)
})

$("#" SugObj.suggestion_div_id " .moreline") .click(function(){
window.clearInterval(intId);
$("#" SugObj.keywords_input_id "").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(1);
});

})

//isMore는 1입니다. 항목이 20개보다 많으면 20개가 표시됩니다.
//isMore는 0입니다. 항목이 10개보다 많으면 10개만 표시됩니다. 10보다 크면 숫자가 표시됩니다.
function runSearchAjax(isMore) {
$. ajax({
type: "GET",
dataType: "json",
url:$ ("#" SugObj.keywords_input_id "").attr("searchURL"),
data: {
"keywords_input":escape($("#" SugObj.keywords_input_id "").val())
},
success:function(data,status) {
if (data.sugList == null || data.sugList == 정의되지 않음 || data.sugList.length == 0) {
$("#" SugObj.suggestion_div_id "").empty();
$("# " SugObj.suggestion_div_id "").css("display","none")
} else {
//var result = $.parseJSON(data.sugList);
var result = data.sugList;
var dataArray =
$.each(result,function(i,value))
dataArray.push(value);
});
//기록 가져오기
var dataItemLength = dataArray.length;
if (dataItemLength <= 0) >return; //검색 제출 결과가 0이면 반환

var layerLabel = []
layerLabel.push(" ");//테이블 만들기
if (isMore == 0) {
if (dataItemLength <= SugObj.default_showItem_count) {
for (var i = 0; i < ; dataItemLength; i) {
layerLabel.push(" ")
}
}else{
for (var i = 0; i < SugObj.default_showItem_count; i) {
layerLabel.push(" ")
}
layerLabel.push (" layerLabel.push(" class='moreline'>< td style='padding-left:" (SugObj.keywords_input_width-56) "px'> ");
layerLabel.push(" more...< ;/span> ");
}
} else if (isMore == 1) {
if (dataItemLength <= SugObj.more_showItem_count) {
for (var i = 0; i < dataItemLength; i) {
layerLabel.push(" < ;tr style='cursor:pointer;color:" SugObj.keywords_input_color ";font-size:" SugObj.keywords_input_font_size "' ");
layerLabel.push(" class='line' > ")
}
}else{
for (var i = 0; i < SugObj.more_showItem_count; i) {
layerLabel.push(" layerLabel.push(" class='line' > ");
}
}
}else{
for (var i = 0; i < dataItemLength; i) {
layerLabel.push(" layerLabel .push(" class='line' >

" dataArray[i] "

" dataArray[i ] "

" dataArray[i] "

" dataArray[i] "

" dataArray[i] " ");
}
}
layerLabel.push("

");
var layer = layerLabel.join("")
//DIV 표시
$("#" SugObj.suggestion_div_id "" ).css("display","block");
//먼저 #searchResult
$("#" SugObj.suggestion_div_id "").empty()/ / 새로 생성된 테이블을 #searchResult
$("#" SugObj.suggestion_div_id "").append(layer)
$("#showDataTable tr").css("color",SugObj .keywords_input_color)에 삽입합니다. ;
$("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);
//프롬프트 상자의 마우스 호버 이벤트 듣기
$("tr.line ").hover(function(){
$("tr.line").css("배경","#fff");
$(this).css("배경","# c0c0c0 ");
},function(){
$(this).css("배경","#fff");
});
}
}
} );
}

//입력 상자의 좌표 변경
function ChangeCoords() {
//가장 왼쪽 끝으로부터의 거리 가져오기, 픽셀, 정수
var left = $("#" SugObj.keywords_input_id "").offsetLeft;
//상단으로부터의 거리, 픽셀, 정수 가져오기
var top = $("#" SugObj.keywords_input_id "").offsetTop 키워드_input_height ;
//CSS 속성 재정의
$("#" SugObj.suggestion_div_id "").css("left",left "px")
$("#" SugObj.suggestion_div_id " ") .css("top",top "px");
}

//검색 프롬프트 결과의 마우스 클릭 이벤트 수신
function hoverAction(data) {
// 검색 프롬프트 DIV 숨기기
$("#" SugObj.suggestion_div_id "").css("display","none")
//검색 프롬프트 입력 상자에 클릭 데이터 추가
$( " #" SugObj.suggestion_div_id "").val(data);
//검색 프롬프트 입력 상자에 커서를 놓습니다.
$("#" SugObj.suggestion_div_id "").focus();
//cursor_now_position 값을 초기값으로 변경
cursor_now_position = -1
//Ajax 메소드를 실행하고 서버에 요청 보내기
runSearchAjax(0)

/ /양식의 크기 변경은 resize() 이벤트를 트리거합니다. 이벤트 내에서 ChangeCoords() 메서드를 호출하면 됩니다.
$(window).resize(ChangeCoords)