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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现轮播图效果demo
Jan 11 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
十天学会php之第四天
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
解决小程序无法触发SESSION问题
2020/02/03 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python元组知识点总结
2019/02/18 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python interpolate插值实例
2020/07/06 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
投标承诺书怎么写
2014/05/24 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书