jQuery实现模拟搜索引擎的智能提示功能简单示例


Posted in jQuery onJanuary 27, 2019

本文实例讲述了jQuery实现模拟搜索引擎的智能提示功能。分享给大家供大家参考,具体如下:

jQuery中模仿搜索引擎的智能提示功能,本案例仅供初学者一个参考,也是我个人在初学jquery时写的一个初学案例。有不当之处,敬请指教。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com jQuery模拟搜索提示</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
    var arr=['小李','小二','小三','老林','老王','二哈','小强'];
      var focus=false;
      $(document).ready(function(){
        $("#txt").bind("focus",function(){
          $("#auto").show();
          abc();
        });
        $("#txt").bind("keyup",function(){
          abc();
        });
        $("#txt").bind("blur",function(){
          $("#auto").hide();
        });
        function abc(){
          var auto=$("#auto");
          var txt=$("#txt").val();
          var new_arr=new Array();
          var n=0;
          for(i in arr){
            if(arr[i].indexOf($("#txt").val())>=0){
              new_arr[n++]=arr[i];
            }
          }
          auto.empty();
          for(i in new_arr){
            var DivNode=$("<div>").attr("id",i);
            DivNode.attr("style","width:100px;height:30px;border: 1px solid red;");
            DivNode.mouseover(function(){
              $(this).css("background-color","white");
            });
            DivNode.mouseleave(function(){
              $(this).css("background-color","white");
            });
            DivNode.click(function(){
              $("#txt").val($(this).html());
            });
            DivNode.html(new_arr[i]);
            auto.append(DivNode);
          }
        }
      });
    </script>
  </head>
  <body>
    <div>
    <input type="text" id="txt"/>
    <div id="auto"></div>
    </div>
  </body>
</html>

运行效果:

jQuery实现模拟搜索引擎的智能提示功能简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
You might like
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
解决python删除文件的权限错误问题
2018/04/24 Python
学生信息管理系统python版
2018/10/17 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python try except finally资源回收的实现
2021/01/25 Python
python包的导入方式总结
2021/03/02 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
传播学毕业生求职信
2013/10/11 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
教师实习自我鉴定
2013/12/18 职场文书
创业计划书之便利店
2019/09/05 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers