jQuery 플러그인은 Baidu 검색 상자 스마트 프롬프트(값 값 포함)를 모방합니다.

회사에서 Baidu를 모방하고 Value가 있는 검색창을 만들어야 하기 때문에 인터넷에서 Text만 찾았고 Value가 있는 검색창이 없어서
코드를 직접 붙여넣었습니다.

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

')
c.after(d)
d.css({ "왼쪽": p.left, "top": p.top c.height() 옵션 .top, "width": options.width, "max-height": options.maxheight }); ('d.append(t)
d.append('');
c.bind("keydown", keydown_process );
c.bind("keyup", keyup_process);
c.bind("blur", Blur_process) ;
d.bind("focus", focus_div);
d.bind("mouseout", mouseout_div)
}
function Blur_process()
{
timeid = setTimeout (function(){
d.hide();
},200) ;
}
function mouseout_div()
{
t.find(".nowRow"). RemoveClass("nowRow");
}
function focus_div()
{
clearTimeout(timeid);
c.focus()
}
function keydown_process(e )
{
if(d.is(":hidden")){
return;
}
switch(e.keyCode)
{
case 38:
e.preventDefault();
var p = t.find(".nowRow ").prev()
if(p.length > 0){
d.setScroll(options. maxheight, p);
p.mouseover();
}else{
p = t.find("tr:last")
if(p.length > 0); 🎜>d.setScroll(options.maxheight, p);
p.mouseover() ;
}
}
break;
e.preventDefault();
var n = t.find(".nowRow").next();
if(n.length > 0){
d.setScroll(options.maxheight, n); n.mouseover();
}else{
n = t.find( "tr:first")
if(n.length > 0){
d.setScroll(options. maxheight, n);
n.mouseover();
}
break
case 13:
e.preventDefault(); find(".nowRow");
if(n.length > 0){
options.getValue(n.find("input:hidden").val())
c.val (n.text());
options.getText(c.val()) ;
lastValue = "";
d.hide();
break; >}
}
function keyup_process(e)
{
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){
return;
}
if(c.val().length > options.autoLength){
if(c.val( ) == lastValue){
return; // 동일한 값에 대한 여러 요청을 피하기 위해 사용자가 입력하는 것을 고려하여 마지막 값과 같은지 확인
}
lastValue = c.val( ); //요청 값 기록
options.clearValue(); //값 지우기
getData (c, function(data){
if(data.length == 0){
d.hide();
return;
}
t.find("tr") .remove()
$.each(data, function(){
t.append ('' this.text ''); >});
varrows = t.find("tr");
rows.mouseover( function(){
t.find(".nowRow").removeClass("nowRow");
$(this).addClass("nowRow");
});
click(function(){
options.getValue($(this).find("input:hidden) ").val());
c.val($(this).text());
options.getText(c.val());
lastValue = "";
d.hide();
});
d.show();
});
d.hide();
}
}
function getData(o,process )
{
$.ajax({
유형: options.type,
async: options.async, //동기화 제어
url: options.url,
data: o .attr("id") "=" o.val(),
dataType: "json" ,
캐시: false,
성공: 프로세스,
오류: function(err) {
alert(err);
}
}
$.fn.resetEvent = function()
{
c.bind("keydown", keydown_process)
c.bind("keyup", keyup_process)
c.bind("blur ", Blur_process);
d.bind("focus", focus_div);
d.bind( "mouseout", mouseout_div);
}
$.fn.setPosition = function()
{
var p = c.position();
d.css({ "left" : p.left, "top": p.top c.height() options.top })
}
$.fn.setScroll = function(h, o)
{
var offset = o.offset()
if(offset.top > h){
$(this).scrollTop(offset.top - h);
}else{
if(offset .top < 25){ //항목의 높이는 스타일 시트에 해당합니다. td height:25px
$(this).scrollTop(0);
}
}
}
})( jQuery);

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

 
#autoComplete_Group { 
테두리: 1px solid #817F82 ; 
위치: 절대; 
overflow-x:hidden; 
display:none; 배경: 없음 반복 스크롤 0 0 
커서: 기본값; 
너비: 100% 
} 
#autoComplete_Group td { 
색상: 
글꼴: 14px /25px arial ; 
높이: 25px; 
패딩: 0 8px; 
} 
#autoComplete_Group .nowRow { 
배경색:#EBEBEB; > 




코드 복사