jquery 文字自动补全(文本自动补全)

最新推荐文章于 2025-05-16 15:26:54 发布

sunyuyong521

最新推荐文章于 2025-05-16 15:26:54 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

文章标签： jquery function callback div border

本文链接：https://blog.youkuaiyun.com/sunyuyong521/article/details/8072579

这篇博客介绍了如何使用jQuery实现文本框的自动补全功能。通过监听keyup和keydown事件，结合setTimeout延迟调用doPost函数进行异步搜索。在接收到搜索结果后，动态创建div展示建议项，并添加点击事件Chk来选中建议项。同时，提供了上下键导航和回车搜索的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var val;
$(function() {
var timeOut;
$(".seach>.text").keyup(function(e) {
if (e.keyCode > 36 && e.keyCode < 41 || e.keyCode == 13) {

return false;
}

  clearTimeout(timeOut);
  val = $(this).val();
  if (val != "") {
   timeOut = setTimeout(doPost, 200);
  } else {

$(".seach").nextAll().remove();
}
});

$(".seach>.text").keydown(function(e) {

  switch (e.keyCode) {
  case 40:
   down();
   break;//下
  case 38:
   up();
   break;//上
  case 13:
   doSearch();//回车
   break;
  }

});
$(".seach>.text").blur(function() {

setTimeout(clear, 200);

});
$(".button").click(
   function() {
    window.location.href = "Search.action?goods.name="
      + $(".seach>.text").val();

});

});
function clear() {
$(".seach").next().remove();

}
function doPost() {

$.get("GoodsSearch.action", {
"goods.name" : val
}, callback);
}
function callback(data) {
var obj = eval(data);
$(".seach").next().remove();
var div = "<div style='border:1x solid #aaaaaa;float: left;height:30px;'>"
for ( var i = 0; i < obj.length; i++) {

  div += "<div style='width: 175px;line-height: 30px;cursor:pointer;' onclick='Chk(this)'>"
    + obj[i].name + "</div>";
  if (i == 5) {

break;
}

}
div += "</div>"
if (obj.length > 0) {
$(".seach").after($(div));
}

}
function up() {
if ($(".searchBg").length == 0) {
$(".seach").next().children().last().addClass("searchBg");
} else {
$(".searchBg").removeClass("searchBg").prev().addClass("searchBg");
}
if ($(".searchBg").length == 0) {

  $(".seach>.text").val(val);
} else {
  $(".seach>.text").val($(".searchBg").text());
}
}
function down() {
if ($(".searchBg").length == 0) {
  $(".seach").next().children(":eq(0)").addClass("searchBg");
} else {
  $(".searchBg").removeClass("searchBg").next().addClass("searchBg");
}
if ($(".searchBg").length == 0) {

$(".seach>.text").val(val);
} else {
$(".seach>.text").val($(".searchBg").text());
}
}
function doSearch() {

window.location.href = "Search.action?goods.name="
+ $(".seach>.text").val();

$(".seach").next().remove();

}
function Chk(o) {
$(".seach>.text").val(o.innerText);
$(".seach").next().remove();

}