相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系统中还需要链接后台的代码。

  在现在的Web设计中,提高用户体验是企业最为注重的内容之一。在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用。例如Google的搜索框效果如下:

这里介绍一个jQuery实现搜索关键字自动匹配提示方法。jQuery AutoComplete 是一个基于jQuery实现搜索关键词自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器。

演示效果http://www.devbridge.com/projects/autocomplete/jquery/#demo

下面是具体的使用方法:

1,使用设置

首页,要把插件的js代码嵌入到你自己的项目中去。

1
2
<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.autocomplete.js" type="text/javascript"><!--mce:1--></script>

2,使用方法

为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。

1
<input id="query" name="q" />

初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。

1
2
3
4
5
6
7
8
9
10
11
12
$('#query').autocomplete({
        serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests
        minChars: 2, // Minimum request length for triggering autocomplete
        delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex)
        maxHeight: 400, // Maximum height of the suggestion list, in pixels
        width: 300, // List width
        zIndex: 9999, // List's z-index
        deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms.
        params: { country: 'Yes'}, // Additional parameters
        onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected,
        lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete
    });

根据文本表单中的输入信息,进行关键字提示匹配。

1
2
3
4
5
{
    query:'Li', // Original request
    suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions
    data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions.
 }

jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。

1
2
3
4
var ac = $('#query').autocomplete({ /*parameters*/ });
    ac.disable();
    ac.enable();
    ac.setOptons({ zIndex: 1001 });

3,设置表现样式

最后,用div和css美化表现效果。

1
2
3
4
5
6
7
8
<div class="autocomplete-w1">
<div id="Autocomplete_1240430421731" class="autocomplete" style="width: 299px;">
<div><strong>Li</strong>beria</div>
<div><strong>Li</strong>byan Arab Jamahiriya</div>
<div><strong>Li</strong>echtenstein</div>
<div class="selected"><strong>Li</strong>thuania</div>
</div>
</div>
1
2
3
4
5
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

jQuery AutoComplete 插件官方链接

插件介绍www.devbridge.com/projects/autocomplete/jquery/

插件下载www.devbridge.com/projects/autocomplete/jquery/#download

这里还有一种基于MooTools框架的关键字自动匹配提示方法:

MooToolswww.ajaxdaddy.com/mootools-autocomplete.html

jQuery的搜索关键词自动匹配插件的更多相关文章

  1. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  2. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  3. java_前端_autocomplete_搜索框自动匹配提示

    效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> < ...

  4. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  5. jquery 实现邮箱输入自动提示功能:(二)

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  6. ThinkPHP自动获取关键词(调用第三方插件)

    ThinkPHP自动获取关键词调用在线discuz词库 先按照下图路径放好插件 方法如下 /** * 自动获取关键词(调用第三方插件) * @return [type] [description] * ...

  7. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  8. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  9. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

随机推荐

  1. Spring boot之SpringApplicationBuilder,@@Configuration注解,@Component注解

    SpringApplicationBuilder: 该方法的作用是可以把项目打包成war包 需要配置启动类,pom.xml文件等,具体见:http://blog.csdn.net/linzhiqian ...

  2. 模板优化 运用 function 及 外部模板

    我们都知道模板是泛型的,但是,它一旦被实例化就会产生一个实例化的副本. 好了,大家应该能够猜到,低效模板和高效模板的差异了 一般的低效模板: 1.泛型实参表达形式多样导致的低效模板 2.多文件引用同一 ...

  3. 如何定义最佳 Cache-Control 策略

    定义最佳 Cache-Control 策略 按照以上决策树为您的应用使用的特定资源或一组资源确定最佳缓存策略.在理想的情况下,您的目标应该是在客户端上缓存尽可能多的响应,缓存尽可能长的时间,并且为每个 ...

  4. tensorflow模块安装

    有时候,我们的电脑上或许会同时安装多个python的环境,譬如,我的电脑上同时装了anaconda2和3. 在安装的时候,譬如,我想在python3中装tensorflow,则需要在 C:\Progr ...

  5. android 不失真 显示 超高清 图片 长图

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 通过计算 位图工厂.选项  对象的 inSamleSize 值 等比压缩 图片. 使用 ...

  6. hash课堂测试补分博客

    题目要求: 开放地址法: 概念: 所谓的开放定址法就是一旦发生了冲突,就去寻找下一个空的散列地址,只要散列表足够大,空的散列地址总能找到,并将记录存入. 它的公式为: 解题过程(在下图中): 拉链法: ...

  7. bzoj 3209 数位DP+欧拉定理

    枚举1的个数,统计有那么多1的数的个数 /************************************************************** Problem: 3209 Us ...

  8. Codeforces Round #228 (Div. 1) C. Fox and Card Game 博弈

    C. Fox and Card Game 题目连接: http://codeforces.com/contest/388/problem/C Description Fox Ciel is playi ...

  9. Codeforces Round #298 (Div. 2) B. Covered Path 物理题/暴力枚举

    B. Covered Path Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/534/probl ...

  10. 让机器教人学习更有效:Becoming the Expert - Interactive Multi-Class Machine Teaching

    这是CVPR2015的一篇非常有趣的文章,论文研究了如何让机器自动地教导学生进行学习目标的分类.论文研发了一种机器学习方法,通过人机交互的过程中,不断的优化机器指导的方法和技巧,从而提高人学习目标分类 ...