jquery_jquery 기반 자동 완성 기능
May 16, 2016 pm 04:10 PM
jquery
기능
자동완성
이 글의 예시에서는 jquery를 기반으로 자동 완성 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
$(function() {
// 自动补全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
$("#sele").keyup(function(even) {
var v = even.which;
If (v == 38 || v == 40 || v == 13)// 상하 키 또는 확인 키를 클릭할 때 데이터 전송을 방지
{
반품;
}
var txt = $("#sele").val();//여기서 입력 상자의 값을 가져옵니다
If (txt != "") {
//데이터 취합
$.ajax({
url: "Birthday_autoCompletion",//백그라운드에서 json 데이터 가져오기
유형: "게시물",
데이터 유형: "json",
데이터: {"bir.userName": txt
},
성공 : 함수(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top 30) "px");
$("#autoTxt").css("left", offset.left "px");
var 후보 = "";
Maxcount = 0; // 그럴 가치가 있습니다
$.each(ls, function(k, v) {
후보자 = "<li id='" maxcount "'>" v "</li>";
> });
$("#autoTxt").html(후보자);
$("#autoTxt li:eq(0)").css("배경", "#A8A5A5");
//객체 강조
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//LI 클릭시 반영
$("#autoTxt li").click(function(){
$("#sele").val($("#autoTxt li:eq(" this.id ")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("배경", "#FFFFFF");
$("#autoTxt li:eq(" this.id ")").css("배경", "#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxt li").css("배경", "#FFFFFF");});
},
오류: 함수() {
$("#autoTxt").html("");
$("#autoTxt").hide();
최대 개수 = 0;
}
});
} 그 밖의 {
$("#autoTxt").hide();
최대 개수 = 0;
$("#sestart").click();
}
});
//当单击BODY时则隐藏搜索值
$("body").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
// 写移动事件//上键38 下键40 确定键 13
$("body").keyup(function(even) {
var v = even.which;
if (v == 38)// 按上键时
{
if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
$("#sele").blur();
if(thisCount>0)
--thisCount;
그 외
thisCount=0;
$("#autoTxt li").css("배경", "#FFFFFF");
$("#autoTxt li:eq(" thisCount ")").css("배경", "#A8A5A5");
}else{$("#sele").focus();}
} else if (v == 40) {// 按下键时
if(thisCount<maxcount-1)
{
$("#sele").blur();
thisCount;
$("#autoTxt li").css("배경", "#FFFFFF");
$("#autoTxt li:eq(" thisCount ")").css("배경", "#A8A5A5");
}
} else if (v == 13) {// 按确认键时
var tt=$("#" thisCount).text();
if(tt!="")
{
$("#sele").val(tt);
$("#autoTxt").html("");
$("#autoTxt").hide();
}다른
{
if($("#sele").val()!="")
$("#sestart").click();
}
} 그 밖의 {
if($("#autoTxt").html()!="")
{
$("#sele").focus();
thisCount=0;
}
}
});
});
希望本文所述对大家의 jQuery는 매우 유용합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7302
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1207
29



vivox100s와 x100의 차이점: 성능 비교 및 기능 분석

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까?
