L'exemple de cet article décrit la méthode de fonction de complétion automatique basée sur jquery. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
$(function() {
// 自动补全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("
");
$("#sele").keyup(function(even) {
var v = pair.which;
If (v == 38 || v == 40 || v == 13)// L'empêcher de transmettre des données en cliquant sur les touches haut et bas ou sur la touche OK
{
revenir ;
}
var txt = $("#sele").val();//Voici pour obtenir la valeur de sa zone de saisie
Si (txt != "") {
//Assembler les données
$.ajax({
url : "Birthday_autoCompletion",//Obtenir les données json en arrière-plan
tapez : "post",
Type de données : "json",
données : {"bir.userName": txt
},
succès : fonction(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top 30) "px");
$("#autoTxt").css("left", offset.left "px");
var Candidat = "";
maxcount = 0;//Récupérer à nouveau la valeur
$.each(ls, function(k, v) {
Candidat = "
" v "";
});
$("#autoTxt").html(Candidat);
$("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//Mettre en surbrillance l'objet
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//Réfléchissez lorsqu'un LI est cliqué
$("#autoTxt li").click(function(){
$("#sele").val($("#autoTxt li:eq(" this.id ")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq(" this.id ")").css("background", "#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxt li").css("background", "#FFFFFF");});
},
erreur : fonction() {
$("#autoTxt").html("");
$("#autoTxt").hide();
nombre maximum = 0;
>
});
} autre {
$("#autoTxt").hide();
nombre maximum = 0;
$("#sestart").click();
>
});
//当单击BODY时则隐藏搜索值
$("corps").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
// 写移动事件//上键38 下键40 确定键 13
$("body").keyup(function(even) {
var v = pair.which;
si (v == 38)// 按上键时
{
if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
$("#sele").blur();
si(thisCount>0)
--thisCount;
d'autre
thisCount=0;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("thisCount ")").css("background", "#A8A5A5");
}else{$("#sele").focus();}
} else if (v == 40) {// 按下键时
si(thisCount
{
$("#sele").blur();
ceCompte ;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("thisCount ")").css("background", "#A8A5A5");
>
} else if (v == 13) {// 按确认键时
var tt=$("#" thisCount).text();
si(tt!="")
{
$("#sele").val(tt);
$("#autoTxt").html("");
$("#autoTxt").hide();
}ailleur
{
if($("#sele").val()!="")
$("#sestart").click();
>
} autre {
if($("#autoTxt").html()!="")
{
$("#sele").focus();
thisCount=0;
>
>
});
});