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 23 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery实现烟花效果(面向对象)
Mar 10 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
解析php5配置使用pdo
2013/07/03 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
JavaScript实现购物车基本功能
2017/07/21 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python调用windows api锁定计算机示例
2014/04/17 Python
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python使用PyQt5的简单方法
2019/02/27 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
员工年终演讲稿
2014/01/03 职场文书
高三高考决心书
2014/03/11 职场文书
建议书标准格式
2014/03/12 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
检察院起诉意见书
2015/05/20 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技