클래스 구글suggestion
//google suggest start
var taxonNameList = null;
var index = 0;
var size = 0;
var taxonNameArray ;
//set the panel on the top of others
$(document).ready(function(){
var left = $("#taxonQuery").offset().left;
var top = $("#taxonQuery").offset().top;
var panel = $("#taxonNameListPanel");
panel.css("left",left);
panel.css("top",top + 20);
panel.css("background","#fff");
});
function taxonNameSuggest(e){
//keyset
var e2 = window.event||e;
var keyStr = e2.keyCode;
if(keyStr!=38&&keyStr!=40&&keyStr!=13){
var key = $("#taxonQuery").val();
var length = key.length;
var panel = $("#taxonNameListPanel");
$.get("../taxonNameSuggest?suffix=" + key,function(data){
taxonNameList = data;
setTaxonNamePanel();
panel.show();
});
}else{
if(keyStr==38){//up
if(index!=size){
if(index==-1)index = index +1;
$("#taxonQuery").val(taxonNameArray[index]);
$("#item" + index).css("background","gray");
$("#item" + (index - 1)).css("background","");
index=index+1;
}
}else if(keyStr==40){//down
if(index!=-1){
if(index==size)index = index-1;
$("#taxonQuery").val(taxonNameArray[index]);
$("#item" + index).css("background","gray");
$("#item" + (index + 1)).css("background","");
index=index-1;
}
}else{//enter
hide();
$("#searchButton").focus();
}
}
}
function setTaxonNamePanel(){
taxonNameArray = taxonNameList.split(";");
var table = document.getElementById("taxonNameTable");
//delete all rows
size = taxonNameArray.length-1;
index = size - 1;
for(i=table.rows.length-1;i>=0;i--){
table.deleteRow(i);
}
for(i=0;i<taxonNameArray.length;i++){
if(taxonNameArray[i]==null||taxonNameArray[i]=="")break;
var newRow = table.insertRow(0);
newRow.onmouseover=mup;
newRow.onmouseout=mout;
var newCol = newRow.insertCell(0);
newCol.innerHTML = "<div onclick='setValue(this)' id='item" + i + "''>" + taxonNameArray[i] + "</div>";
}
}
function mup(){
$(this).css("background","gray");
}
function mout(){
$(this).css("background","");
}
function setValue(t){
$("#taxonQuery").val($(t).text());
hide();
}
function hide(){
$("#taxonNameListPanel").hide();
}
//end of google suggest
2. 페이지 코드:
<input id="taxonQuery" type="text" value="<%if(request.getParameter("taxonName")!=null) out.print(request.getParameter("taxonName")); %>" onkeyup="taxonNameSuggest(event)" />
<input id="searchButton" type="button" value="Search" onClick="taxonSearch();">
<div id="taxonNameListPanel" style="width: 155px; border: 1px solid #000; position: relative; left: 104px; top: 0px; display: none;">
<table width="100%" id="taxonNameTable" style="cursor: hand;">
</table>
<div style="float: right;clear:both;">
<a href="#" style="border: none; font-size: 12px;" onclick="hide(this)">close</a>
</div>
</div>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.