js  实现类似百度联想输入，自动补全功能

方案一：

search是搜索框id="search"

   //点击页面隐藏自动补全提示框

     document.onclick = function (e) {

         var e = e ? e : window.event;

         var tar = e.srcElement || e.target;

         if (tar.id != search) {

             if ($("#" + auto).is(":visible")) {

                 $("#" + auto).css("display", "none")

             }

         }

     }

方案二：

me.tempIds=['aa','bb','cc'];

  //绑定mousedowm事件，来移除智能提示框

  $(document).bind('mousedown',function (event) {

         var e = e ? e : window.event;

          var tar = e.srcElement || e.target;

          if (tar.id == null || $.inArray(tar.id, me.tempIds) == '-1') {

            jo.find('.productType_hint').remove();

         }

    });

方案三：

使用jquery插件：

引入：

<style type="text/css" src="js/jquery.bigautocomplete.css"></style>
 <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
  <script src="js/jquery.bigautocomplete.js" type="text/javascript"></script>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta charset="utf-8">

     <style type="text/css" src="js/jquery.bigautocomplete.css"></style>

     <script src="js/jquery-1.8.2.js" type="text/javascript"></script>

     <script src="js/jquery.bigautocomplete.js" type="text/javascript"></script>

     <style type="text/css">

     </style>

     <script type="text/javascript">

         $(function(){

             $("#test").bigAutocomplete({

                 width:300,

                 data:[{title:"中国好声音",result:{ff:"qq"}},

                     {title:"中国移动网上营业厅"},

                     {title:"中国银行"},

                     {title:"中国移动"},

                     {title:"中国好声音第三期"},

                     {title:"中国好声音 第一期"},

                     {title:"中国电信网上营业厅"},

                     {title:"中国工商银行"},

                     {title:"中国好声音第二期"},

                     {title:"中国地图"}],

                 callback:function(data){

                    // alert(data.title);

                 }

             });

         })

     </script>

 </head>

 <body>

 <div>

     <input id="test" type="text" value="" class="text"/>

 </div>

 </body>

 </html>

方案五：

如果html结构简单，只需找到最外层div，然后触发click事件；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　没有做不到，只有想不到。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-----zlp

javascript 实现类似百度联想输入，自动补全功能的更多相关文章

  1. 【Qt编程】基于Qt的词典开发系列<十四>自动补全功能

    最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行 ...

  2. StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)

    @ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...

  3. 解决VS Code开发Python3语言自动补全功能不带括号的问题

    Visual Studio Code(以下简称VS Code)用来开发Python3,还是很便利的,本身这个IDE就是轻量级的,才几十兆大小,通过安装插件的方式支持各种语言的开发.界面也美美哒,可以在 ...

  4. 第三百六十八节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  5. 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...

  6. java整合Elasticsearch,实现crud以及高级查询的分页,范围,排序功能,泰文分词器的使用,分组,最大,最小,平均值,以及自动补全功能

    //为index创建mapping,index相当于mysql的数据库,数据库里的表也要给各个字段创建类型,所以index也要给字段事先设置好类型: 使用postMan或者其他工具创建:(此处我使用p ...

  7. gocode+auto-complete搭建emacs的go语言自动补全功能

    上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...

  8. notepad++代码自动补全功能

    可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了

  9. Eclipse自动补全功能和自动生成作者、日期注释等功能设置

    修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...

随机推荐

  1. mysql之 [ERROR] InnoDB: Unable to lock ./ibdata1, error: 11

    问题描述:启动MySQL后,出现连接不上,报 [ERROR] InnoDB: Unable to lock ./ibdata1, error: 11[root@mysql01 ~]# service ...

  2. JSF通过超链接传递参数到控制层

    JSF通过超链接传输数据到控制层可以分为三个步骤: 1.首先将数据加入到超链接中.通过<h:link>标签加入一个超链接,然后加入<f:param>标签加入参数.示例代码如下: ...

  3. maven打包指定main函数的入口，生成依赖的包

    为了使Jar包中指定Main方法位置和生成依赖包,需要在pom文件中加入如下配置: <build> <plugins> <plugin> <groupId&g ...

  4. dirs命令

    dirs命令显示当前目录栈中的所有记录(不带参数的dirs命令显示当前目录栈中的记录).dirs始终显示当然目录, 再是堆栈中的内容:即使目录堆栈为空, dirs命令仍然只显示当然目录. 语法 dir ...

  5. Solaris10上如何识别新增加的HDLM LUN

    先在磁盘阵列上将新加LUN映射给主机组,然后在光纤交换机上增加相关zone信息.以下是Solaris10上需要执行的操作步骤. 在Solaris10上重新扫描磁盘 -bash-3.2# cfgadm ...

  6. Less known Solaris features: svccfg editprop (ZT)

    http://www.c0t0d0s0.org/archives/7675-Less-known-Solaris-features-svccfg-editprop.html Sometimes sma ...

  7. 11-10SQLserver基础--数据库之视图

    视图 视图实际就是对表的连接展现出来的结果建成的虚拟表.简单来说,视图实际上就是一个虚拟的表,通过表与表之间的关系连接起来,方便查询时使用. 首先,将需要连接的语句存储到数据库中,定义新的视图名代替连 ...

  8. LaTeX数学公式基础

    LaTeX数学公式 参考:https://www.cnblogs.com/Sinte-Beuve/p/6160905.html 原博客显示有点问题,重新搬运整理LaTeX数学公式部分的基本用法 基础 ...

  9. Android开源地图项目 BigPlanetTracks 学习随笔

    一.         app主体部分 [tyt.android.bigplanettracks] 二.         地图部分 [tyt.android.bigplanettracks.maps] ...

  10. Windows安装memcached图文教程（转）

    一.下载Memercached For Windows 二.安装步骤 1.解压到指定目录,如:C:\Memcached\memcached-win32-1.4.4-14. 2.用cmd打开命令窗口,转 ...