Js自动下拉补全

最新推荐文章于 2024-04-17 09:35:46 发布
最新推荐文章于 2024-04-17 09:35:46 发布
阅读量1k 收藏
点赞数 2
分类专栏： JS 文章标签： JS 自动补全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML >
  < HEAD >
  < TITLE > New Document </ TITLE >
  < META NAME = "Generator" CONTENT = "EditPlus" >
  < META NAME = "Author" CONTENT = "" >
  < META NAME = "Keywords" CONTENT = "" >
  < META NAME = "Description" CONTENT = "" >
  < script type = "text/javascript" src = "jquery.js" ></ script >
   < script type = "text/javascript" >
   /*自动下拉补全 zhk */
   var highlightindex=-1;//当前高亮的节点
  $(document).ready(function(){
  var wordInput=$("#word");
  var wordInputOffset=wordInput.offset();
  
   $("#auto").hide().css("border","1px black solid").css("position","absolute")
   .css("top",wordInputOffset.top+wordInput.height()+5+"px")
   .css("left",wordInputOffset.left+"px").width(wordInput.width()+2);
  
  wordInput.keyup(function (event){
  
   var myEvent=event||window.event;
   var keyCode=myEvent.keyCode;
   if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
  
    var wordText=$("#word").val();
    var autoNode=$("#auto");
    if(wordText!=""){
    
     
     var wordNodes=$("span");
     
     autoNode.html("");
     wordNodes.each(function(i){
      var wordNode=$(this);
      var newDivNode=$("< div >").attr("id",i);
       
      newDivNode.html(wordNode.text()).appendTo(autoNode);
      newDivNode.mouseover(function(){//鼠标进入
       if(highlightindex!=-1){
         $("#auto").children("div").eq(highlightindex)
         .css("background-color","white");
        }
        highlightindex=$(this).attr("id");
        $(this).css("background-color","red");
       })
  
       newDivNode.mouseout(function(){//鼠标移除
        $(this).css("background-color","white");
       
        })
newDivNode.click(function(){//点击
        var comText=$(this).text();
        $("#auto").hide();
      highlightindex=-1;
      $("#word").val(comText);
        })
  
     })
     if(wordNodes.length>0){
      autoNode.show();
     }else{
      autoNode.hide();
      highlightindex=-1;
      }
    
    }else{
    autoNode.hide();
     highlightindex=-1;
     }
  
    }else if(keyCode==38||keyCode==40){
      if(keyCode==38){//向上
       var autoNodes=$("#auto").children("div");
        if(highlightindex!=-1){
         autoNodes.eq(highlightindex).css("background-color","white");
          highlightindex--;
        }else{
         highlightindex=autoNodes.length-1;
        }
        
        if(highlightindex==-1){
         highlightindex=autoNodes.length-1;
        }
        autoNodes.eq(highlightindex).css("background-color","red");
      }
      if(keyCode==40){
       var autoNodes=$("#auto").children("div");
        if(highlightindex!=-1){
         autoNodes.eq(highlightindex).css("background-color","white");
        }
        highlightindex++;
        if(highlightindex==autoNodes.length){
         highlightindex=0;
        }
        autoNodes.eq(highlightindex).css("background-color","red");
      }
    }else if(keyCode==13){
      
     if(highlightindex!=-1){
      var comText=$("#auto").hide().children("div").eq(highlightindex).text();
      highlightindex=-1;
      $("#word").val(comText);
      }else{
       alert("文本框中的【"+$("#word").val()+"】被提交了");
       $("#auto").hide();
        $("#word").get(0).blur();//失去焦点
      }
     }
   });
  
   $("input [type='button']").click(function(){
    alert("文本框中的【"+$("#word").val()+"】被提交了");
   });
  
  
})
</ script >
  </ HEAD >
  
  < BODY >
  < input type = "text" id = "word" >
< input type = "button" value = "提交" >
< div id = "auto" ></ div >
< p >
< span >aaa</ span >
< span >abc</ span >
< span >abd</ span >
< span >bbc</ span >
< span >beb</ span >
< span >cer</ span >
< span >erd</ span >
< span >beg</ span >
< p >
  </ BODY >
</ HTML >
binbinxz
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
发现一个非常好用的前端js自动补全插件，分享给大家(false)
qq931399960的专栏
05-02 2885
页面 <link rel="stylesheet" href="css/jquery.bigautocomplete.css" type="text/css" /> 自动补全 * { margin: 0px; font-size: 12px; } $(function() { $("#tt").bigAutocomplete({ width : 600,
javascript仿百度输入框提示自动下拉补全
11-26
本文实例讲解了javascript输入框自动下拉补全操作，仿百度、谷歌搜索框提示，具体内容如下 效果图： 具体代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>...
javascript代码自动补全插件
03-27
NULL 博文链接：https://992012.iteye.com/blog/1173866
自动补全插件
guanzhu0510的博客
10-13 648
input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">//前端只要打了@ResponseBody，返回集合，自动转换成json对象，这个data就是返回的list集合。* 用户在这里输入关键字，键盘弹起之后，source方法触发，执行里面的代码，去查询所有带有关键字的数据。用户输入几个字，自动补全出所有符合条件的内容，列在下面，用户就可以选择一条。//客户名字补全插件。
推荐开源项目：Angucomplete —— 强大的Angular.js自动补全组件
最新发布
gitblog_00067的博客
04-17 243
推荐开源项目：Angucomplete —— 强大的Angular.js自动补全组件 项目地址:https://gitcode.com/darylrowland/angucomplete Angucomplete 是一个轻量级、高效且高度可定制的自动补全插件，专为Angular.js框架设计。它提供了丰富的功能和简单易用的API，旨在帮助开发者快速实现搜索框的智能提示功能，提升用户体验。 项目简介...
VS Code使用node.js编译，代码自动补全方法
潮汐未见潮落的博客
07-29 2485
vscode使用node.js实现代码自动补全
JavaScript 文本框下拉自动补全提示
04-15
JavaScript文本框下拉自动补全提示是一种常见的交互设计，它极大地提升了用户在输入时的效率和体验。在网页开发中，这种功能常用于搜索框、表单输入等场景，允许用户在输入过程中根据已有的数据集获取匹配的建议，...
Jquery自动补全
05-30
- 引入jQuery库和自动补全插件的CSS、JS文件。 - 使用JavaScript或jQuery初始化插件，设置数据源、回调函数、延迟时间等参数。 - 实现数据过滤和下拉列表渲染逻辑。 4. **关键代码示例**： ```javascript $...
jquery访问数据库自动补全插件样例
10-09
style.css几个文件，访问的是数据库，返回的是json数据，json格式已经在index.html中，文本框下来智能选择补全，jquery.ui.js中已经包含了jquery.autocomplete.js源码，不在需要单独引用jquery.autocomplete.js文件
js 实现上拉加载和下拉刷新
青蛙king的博客
09-26 6870
一、js 实现上拉加载 实现上拉加载的原理：监听滚动条滑到页面底部，然后就去做一次请求数据。 window.onscroll = function () { const scrollH = document.documentElement.scrollHeight；// 文档的完整高度 const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移 c
【JS相关插件】自动完成提示插件(jquery.autocomplete)
04-01
NULL 博文链接：https://zhuhong7000-gmail-com.iteye.com/blog/1399012
js实现select自动补全功能
10-19
javascript实现select标签支持手动输入并补全输入信息。
自动补全下拉框（可输入匹配的下拉框）
04-30
加入上下键选择功能，回车键选择结果，20170830 博文链接：https://davidhhs.iteye.com/blog/2268888
js自动补全功能
06-12
js输入框（input）自动提示补全功能
使用Js实现一个简单的无限下拉功能
weixin_53405445的博客
10-26 1079
简单实现一个无限下拉功能
关键字自动补全插件——bs_typeahead
m0_66689823的博客
10-14 264
【代码】关键字自动补全插件——bs_typeahead。
下拉框、下拉控件之Select2。自动补全的使用
HiterCoder
03-23 407
下拉框、下拉控件之Select2。自动补全的使用 参考链接： 参考一：https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二：https://www.cnblogs.com/wangchuanqi/p/5981212.html 参考三：https://www.cnb...
js 自动补全
sxtyshi的博客
10-10 1130
研究了三天自动补全jquery.autocomplete.js。其中优化的程度很大。特别是和后台的交互。我采用的是前台静态缓存。 1.加载的js、css Java代码   "text/javascript" src="/front/scripts/jquery/jquery-1.4.2.min.js">  "text/javascript" src="/front/scrip
如何实现搜索时输入字段自动补全提示
04-01
要实现搜索时输入字段自动补全提示，可以采用以下步骤： 1. 从后台获取搜索关键词列表：首先需要从后台...实现搜索时输入字段自动补全提示需要一定的前端编程技能，可以使用 jQuery、Vue.js、React 等框架进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值