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

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

方案一:

search是搜索框id="search"

 1   //点击页面隐藏自动补全提示框
 2     document.onclick = function (e) {
 3         var e = e ? e : window.event;
 4         var tar = e.srcElement || e.target;
 5         if (tar.id != search) {
 6             if ($("#" + auto).is(":visible")) {
 7                 $("#" + auto).css("display", "none")
 8             }
 9         }
10     }

方案二:

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

1  //绑定mousedowm事件,来移除智能提示框
2  $(document).bind(‘mousedown‘,function (event) {
3         var e = e ? e : window.event;
4          var tar = e.srcElement || e.target;
5          if (tar.id == null || $.inArray(tar.id, me.tempIds) == ‘-1‘) {
6            jo.find(‘.productType_hint‘).remove();
7         }
8    });

方案三:

使用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>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <style type="text/css" src="js/jquery.bigautocomplete.css"></style>
 7     <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
 8     <script src="js/jquery.bigautocomplete.js" type="text/javascript"></script>
 9     <style type="text/css">
10
11     </style>
12     <script type="text/javascript">
13         $(function(){
14
15             $("#test").bigAutocomplete({
16                 width:300,
17                 data:[{title:"中国好声音",result:{ff:"qq"}},
18                     {title:"中国移动网上营业厅"},
19                     {title:"中国银行"},
20                     {title:"中国移动"},
21                     {title:"中国好声音第三期"},
22                     {title:"中国好声音 第一期"},
23                     {title:"中国电信网上营业厅"},
24                     {title:"中国工商银行"},
25                     {title:"中国好声音第二期"},
26                     {title:"中国地图"}],
27                 callback:function(data){
28                    // alert(data.title);
29                 }
30             });
31
32         })
33     </script>
34 </head>
35 <body>
36 <div>
37     <input id="test" type="text" value="" class="text"/>
38 </div>
39 </body>
40 </html>

方案五:

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

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

                                                                       -----zlp

时间: 2024-10-05 06:12:44

js 实现类似百度联想输入,自动补全功能的相关文章

【Qt编程】自动补全功能

最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行首字匹配,有时也会不方便.例如,如果我输入一个"好",如果是首字匹配的话会出现下图: 如果是句中匹配的话,则是这种情况: 你可以根据自己的要求进行选择哪一种模式. Qt中自带QCompleter类来实现上面的自动补全功能,读者可以在Qt自带的demo中很容易的学会该类的使用.下面我要讲的是

easyui-combobox 实现简单的自动补全功能

前台: Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCha

jQuery Autocomplete 自动补全功能

使用Autocomplete可以很简单的就有文本框的自动补全功能提示了. 在HTML文件中引入autocomplete的js文件和css样式文件,以及autocomplete压缩包中的jQuery的js文件,不要私自用高版本的jQuery,可能会导致显示不出效果. 先来从网友那里拷贝过来的最简单的例子: <span style="font-size:24px;"><!DOCTYPE html> <html> <head> <meta

solr进阶七:与jQuery结合的自动补全功能

网上有大量的jQuery自动补全功能的插件,我实现这个功能是采用网友写好的纯jQuery代码,而不是采用插件,因为特效会差很多.而后台的数据是从solr那边获取过来,通过整理,放到对象中,再放到集合中,然后在servlet层解开,生成xml文件,返回到前台,形成自动提示补全的功能,流程非常简单,没有采用框架技术,只是用了JSP的servlet来做中间层而已. 目录结构如下: 1.先编写实体类src\com\lifeix\entity\Word.java package com.lifeix.en

editplus中html的自动补全功能

之前一直都是“纯手工”,一个一个符号慢慢敲的,现在编码量大了,自然效率也不能还停留在一个一个慢慢敲的时代. 如何设置editplus中的自动补全功能? 首先在Tools中找到Configure User Tools...,点击File选项下的Settings &&syntax,在File types中选中HTML. 将下面的Auto Completion选项勾选,默认是htmlbar.acp.点击下面的OK就可以了. 怎么使用editplus的自动补全呢? 首先先新建一个HTML页面,当你

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

elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/search-suggesters-completion.html 1.创建搜索自动补全字段suggest 自动补全需要用到一个字段名称为suggest类型为Completion类型的一个字段 所以我们需要用将前面的elasticsearch-dsl操作elasticsearch(搜索引擎)增加sugg

jquery的输入框自动补全功能+ajax

jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链接找不到了,但是感谢分享! 效果图: 涉及到ajax请求我这里本地请求不到数据就先放测试代码,在文章的最后会放上ajax代码: 用来测试的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset

c#TextBox输入框自动提示、自动完成、自动补全功能

功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要使用的自定义 T:System.Collections.Specialized.StringCollection. TextBox.AutoCompleteMode 属性 获取或设置一个选项,该选项控制自动完成应用于 TextBox 的方式. 属性值 类型:System.Windows.For

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

以前想实现添加代码作者信息的东西,但不知道怎样实现,今天终于在网上无意中找到解决办法了 Eclipse自动生成作者.日期注释等功能设置 在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以看到有很多选项,我们便可对此注释信息模板进行编辑. 如我们希望在一个Java文件