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.load()和Jsp的include的区别
Apr 12 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
基于JQuery实现页面定时弹出广告
May 08 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
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
js读取配置文件自写
2014/02/11 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python fabric使用笔记
2015/05/09 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Django操作session 的方法
2020/03/09 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
文员求职信
2014/07/15 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电