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自定义图片上传插件实例代码
Apr 04 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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中HTML标签过滤技巧
2014/01/07 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
js实现随机点名程序
2020/09/17 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python判断端口是否打开的实现代码
2013/02/10 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
垃圾回收的优点和原理
2014/05/16 面试题
2015年禁毒宣传活动总结
2015/03/25 职场文书
应收账款管理制度
2015/08/06 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
数据库连接池
2021/04/06 MySQL
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
nginx之queue的具体使用
2022/06/28 Servers