`

转(Jquery AutoComplete的使用方法实例)

    博客分类:
  • AJAX
阅读更多

为了实现一个花哨的自动搜索补全功能,故需要写js了,以前使用YUI的,现在希望找个轻量级的了,找到了jquery,go了很久才找到了我想要的,故在此记录下。

 

官方地址 :http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

 

 

转自:http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html

 

 

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

 

jquery-autocomplete配置:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
 <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

 

首先是一个最简单的Autocomplete(自动完成)代码片段:

 

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  runat ="server" >
 3       < title > AutoComplate </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery-1.4.2.min.js" ></ script >
 5       < script  type ="text/javascript"  src ="/js/jquery.autocomplete.min.js" ></ script >
 6       < link  rel ="Stylesheet"  href ="/js/jquery.autocomplete.css"   />
 7       < script  type ="text/javascript" >
 8          $( function () {
 9               var  data  =   " Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities " .split( "   " );
10  
11              $( ' #keyword ' ).autocomplete(data).result( function (event, data, formatted) {
12                  alert(data);
13              });
14          });
15       </ script >
16  </ head >
17  < body >
18       < form  id ="form1"  runat ="server" >
19       < div >
20           < input  id ="keyword"   />
21           < input  id ="getValue"  value ="GetValue"  type ="button"   />
22       </ div >
23       </ form >
24  </ body >
25  </ html >

 

result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。

 

一个稍微复杂的例子,可以自定义提示列表:

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  runat ="server" >
 3       < title > 自定义提示 </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery-1.4.2.min.js" ></ script >
 5       < script  type ="text/javascript"  src ="/js/jquery.autocomplete.min.js" ></ script >
 6       < link  rel ="Stylesheet"  href ="/js/jquery.autocomplete.css"   />
 7       < script  type ="text/javascript" >
 8           var  emails  =  [
 9              { name:  " Peter Pan " , to:  " peter@pan.de "  },
10              { name:  " Molly " , to:  " molly@yahoo.com "  },
11              { name:  " Forneria Marconi " , to:  " live@japan.jp "  },
12              { name:  " Master <em>Sync</em> " , to:  " 205bw@samsung.com "  },
13              { name:  " Dr. <strong>Tech</strong> de Log " , to:  " g15@logitech.com "  },
14              { name:  " Don Corleone " , to:  " don@vegas.com "  },
15              { name:  " Mc Chick " , to:  " info@donalds.org "  },
16              { name:  " Donnie Darko " , to:  " dd@timeshift.info "  },
17              { name:  " Quake The Net " , to:  " webmaster@quakenet.org "  },
18              { name:  " Dr. Write " , to:  " write@writable.com "  },
19              { name:  " GG Bond " , to:  " Bond@qq.com "  },
20              { name:  " Zhuzhu Xia " , to:  " zhuzhu@qq.com "  }
21          ];
22  
23              $( function () {
24                  $( ' #keyword ' ).autocomplete(emails, {
25                      max:  12 ,     // 列表里的条目数
26                      minChars:  0 ,     // 自动完成激活之前填入的最小字符
27                      width:  400 ,      // 提示的宽度,溢出隐藏
28                      scrollHeight:  300 ,    // 提示的高度,溢出显示滚动条
29                      matchContains:  true ,     // 包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
30                      autoFill:  false ,     // 自动填充
31                      formatItem:  function (row, i, max) {
32                           return  i  +   ' / '   +  max  +   ' :" '   +  row.name  +   ' "[ '   +  row.to  +   ' ] ' ;
33                      },
34                      formatMatch:  function (row, i, max) {
35                           return  row.name  +  row.to;
36                      },
37                      formatResult:  function (row) {
38                           return  row.to;
39                      }
40                  }).result( function (event, row, formatted) {
41                      alert(row.to);
42                  });
43              });
44       </ script >
45  </ head >
46  < body >
47       < form  id ="form1"  runat ="server" >
48       < div >
49           < input  id ="keyword"   />
50           < input  id ="getValue"  value ="GetValue"  type ="button"   />
51       </ div >
52       </ form >
53  </ body >
54  </ html >

 

formatItem、formatMatch、formatResult是自定提示信息的关键。

formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。

formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,

formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。

 

附加:http://www.jb51.net/article/22647.htm

 

分享到:
评论

相关推荐

    Jquery AutoComplete的使用方法实例

    要使用 AutoComplete,首先选择一个输入框元素,然后调用 `autocomplete()` 方法。这里是一个简单的例子: ```html $( function() { $( "#searchBox" ).autocomplete({ source: [ "Apple", "Banana", "Cherry...

    jQuery AutoComplete使用实例

    **jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,能够极大地提升用户体验。这个插件基于 jQuery 库,因此需要先引入 jQuery 才能使用。在本文...

    jquery.autocomplete.js使用示例,可直接运行

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    jquery autoComplete

    在提供的“autocomplete 范例”中,可能包含了一个演示如何使用 `jQuery autoComplete` 的实例。这个例子可能包括 HTML 结构、CSS 样式和 JavaScript 代码,展示了如何实现根据输入的表名和字段名实时获取提示信息的...

    jquery Autocomplete插件,搜索自动完成

    jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html

    jquery.autocomplete仿google实例

    这个实例将展示如何使用 jQuery 和 Autocomplete 插件来实现这一效果。 首先,我们需要引入 jQuery 库和 Autocomplete 插件。通常,我们会从 jQuery 官方网站下载最新版本的 jQuery.js 文件,然后将它放在 HTML ...

    jQuery-Autocomplete-master.rar

    5. **基本使用方法**: 要使用jQuery Autocomplete,首先需要引入jQuery和jQuery UI库。然后,选择需要添加此功能的输入框元素,并调用`.autocomplete()`方法,传入配置对象,如数据源(`source`)、触发补全的最小...

    jquery文本框自动补全ajax autocomplete 完整实例

    3. **JavaScript代码**: 使用jQuery的`autocomplete`方法,配置数据源和回调函数。这里通常涉及Ajax请求以获取匹配的建议: ```javascript $(function() { $("#searchBox").autocomplete({ source: function...

    jquery文本框自动补全完整实例 ajax autocomplete

    通过以上步骤,你就可以创建一个基本的jQuery autocomplete实例。`autocomplete2`可能包含更复杂或定制化的实现,例如包含多个数据源、自定义模板等。进一步探索这个文件,你可以学习到更多关于jQuery与Ajax结合实现...

    PHP实例开发源码—jQuery AutoComplete输入提示的应用实例.zip

    &lt;title&gt;jQuery AutoComplete 实例 &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt; &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt; ...

    Jquery AutoComplete自动完成 的使用方法实例

    下面我们将深入探讨JQuery AutoComplete的使用方法及其核心功能。 首先,为了使用JQuery AutoComplete,你需要在HTML文档中引入以下资源: 1. 引入jQuery库:`&lt;script type="text/javascript" src="/js/jquery-...

    jQuery-Autocomplete资源

    这个资源包包含了丰富的信息和实例,可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍** jQuery Autocomplete是jQuery UI框架的一部分,它允许在输入框中实现自动填充功能,通常用于搜索...

    jQuery Autocomplete plugin(自动完成插件) 1.1.zip

    jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...

    jquery-autocomplete

    提供的帮助文档将详细介绍如何配置和使用jQuery Autocomplete插件,包括所有可用的选项、方法和事件。通过Demo,你可以直观地看到插件在实际场景中的应用,有助于理解和学习。Demo中通常包含了各种常见用法和复杂...

    Google Suggest,jquery autocomplete,自动完成示例

    总的来说,这个资源包提供了一个关于如何利用jQuery实现Google Suggest样式的自动完成功能的教程或实例。开发者可以通过学习和实践,提升自己在前端交互设计方面的能力,为网站或应用增加高效、友好的用户体验。同时...

    jquery.autocomplete自动完成实例

    $("#"+txtBelongProvince).autocomplete(data,{ minChars: 0, max:data.length, matchCase:false,//不区分大小写 multiple: true, //允许多选 multipleSeparator:';',//多选分隔符 formatItem: function(row, ...

    jquery.autocomplete实例

    **jQuery Autocomplete 实例详解** `jQuery UI` 的 `Autocomplete` 是一个强大的功能,它为输入框提供了自动补全的功能,广泛应用于各种 Web 应用中,如搜索引擎、表单填充等。这个实例将深入讲解如何在项目中有效...

    jquery.autocomplete.js 自动补全插件实例

    以下是`jQuery.autocomplete.js`的核心功能和使用方法: 1. **数据源**:自动补全的数据可以从多种来源获取,包括静态数组、服务器端API或者AJAX请求。例如,你可以定义一个包含多个选项的JavaScript数组,然后将该...

    jquery autocomplete demo

    《jQuery Autocomplete 实例详解与应用拓展》 在Web开发中,jQuery库因其简洁的API和强大的功能,深受开发者喜爱。而jQuery UI中的Autocomplete组件则为用户输入提供了智能化的建议,极大地提升了用户体验。本篇...

    jquery autocomplete 自动完成 插件

    3. **初始化插件**:使用jQuery选择器找到该元素,并调用`autocomplete()`方法进行初始化,设置必要的选项。 ```javascript $(function() { $("#autocomplete-input").autocomplete({ source: function(request,...

Global site tag (gtag.js) - Google Analytics