此功能在原有的基础上增加了table列表的动态刷新显示
jquery.js 版本：1.2.6
下面给出一个简单的例子来说明使用方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
[color=YellowGreen]<!-- 引入所需的JS库 -->[/color]
<script type="text/javascript" src="lib/jquery.js"></script>
<script type='text/javascript' src='lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.autocomplete.css" />
</head>
<script type="text/javascript">
[color=YellowGreen]<!-- 制造一个测试用数据 -->[/color]
var websites = [{'id':'1','name':'aaa','pass':'123','age':'10'},{'id':'2','name':'abbb','pass':'321','age':'20'}]
$(function(){
$("#website").autocomplete(websites,
{ minChars: '0',
matchProperty:"name",
[color=YellowGreen] <!--设置显示属性为name pass age-->[/color]
listProperty:["name","pass","age"],
resultProperty:["name"],
idProperty:["id"],
[color=YellowGreen] <!-- 设置name pass age 之间的分割符为 </td><td>
这里必须为"</td><td>"否则页面无法正常显示-->[/color]
showPropertyDelimiter:"</td><td>",
[color=YellowGreen]<!-- 此属性是新增的
如果要使用table必须在页面上写一个div标签，并设置componentId为div标签的id
componentType 设置为table -->[/color]
[color=Red] showComponent:{ componentId:"div1",
componentType:"table"}[/color]
}
);
});
</script>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
</p>
[color=Red]<div id="div1" >
</div>[/color]
</body>
</html>
autocomplete.js修改内容：
红色部分为修改内容
1. 第120行
}).blur(function() {
hasFocus = 0;
if (!config.mouseDownOnSelect) {
//whether hide 如果显示方式为table则不隐藏结果
[color=Red]if(options.showComponent.componentType!='table'){[/color]
hideResults();
[color=Red]}[/color]
}
2. 第351行
jQuery.Autocompleter.defaults = {
//新增属性
showComponent:{
//获得显示位置标签的ID
componentId:"div",
//获得显示方式 属性值为"ul"或者"table"
componentType:"ul",
//如果显示方式为table那么为其指定CSS
tableClass: "table_results"
},[/color]
......
3.第554行
根据使用table或是ul创建不同的element及list
var element;
var list;
//showComponent is 'table' or 'ul'
if(options.showComponent.componentType=='table'){
element = jQuery("#"+options.showComponent.componentId);
list=jQuery("<table>")
.appendTo(element)
.addClass(options.showComponent.tableClass);
}else if(options.showComponent.componentType=='ul'){[/color]
element = jQuery("<div>")
.hide()
.addClass(options.resultsClass)
.css("position", "absolute")
.appendTo("body");
list = jQuery("<ul>").appendTo(element).mouseover( function(event) {
if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI')
{
active = jQuery("li", list).removeClass().index(target(event));
jQuery(target(event)).addClass(CLASSES.ACTIVE);
}
}).mouseout( function(event) {
// why we must to do that? is it really needed ?
/*jQuery(target(event)).removeClass();*/
return;
}).click(function(event) {
jQuery(target(event)).addClass(CLASSES.ACTIVE);
select();
input.focus();
return false;
}).mousedown(function() {
config.mouseDownOnSelect = true;
}).mouseup(function() {
config.mouseDownOnSelect = false;
});
}
......
第662行 fillList()方法
根据显示方式为table或ul对生成对应的数据
function fillList() {
list.empty();
//showComponent is 'table'
[color=Red] if(options.showComponent.componentType=='table'){
var tr = jQuery("<tr>");
var title = options.listProperty;
title = title.toString(title).split(",");
for(var j=0;j<title.length;j++){
tr.append("<td>"+title[j]+"</td>");
}
tr.appendTo(list);
}[/color]
var num = limitNumberOfItems(data.length);
for (var i=0; i < num; i++) {
if (!data[i])
continue;
var formatted = options.formatItem ? options.formatItem(data[i].data, i+1, num, data[i].value) : defaultFormatItem(data[i].data,i+1, num);
if ( formatted === false )
continue;
//showComponent is 'table' or 'ul'
[color=Red] if(options.showComponent.componentType=='table'){[/color]
jQuery("<tr>").html( "<td>"+options.highlight(formatted, term)+"</td>" ).appendTo(list)[0].index = i ;
[color=Red]} [/color]
[color=Red]else if(options.showComponent.componentType=='ul'){[/color]
jQuery("<li>").html( options.highlight(formatted, term) ).appendTo(list)[0].index = i;
[color=Red]}[/color]
}
//showComponent is 'table' or 'ul'
[color=Red]if(options.showComponent.componentType=='table'){[/color]
listItems = list.find("tr");
[color=Red]}else if(options.showComponent.componentType=='ul'){[/color]
listItems = list.find("li");
[color=Red]}[/color]
if ( options.selectFirst ) {
//showComponent is 'ul'
[color=Red]if(options.showComponent.componentType=='ul'){[/color]
listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
active = 0;
[color=Red]}[/color]
}
if( options.moreItems.length > 0 && !options.scroll) moreItems.css("display", (data.length > num)? "block" : "none");
list.bgiframe();
}
分享到：
相关推荐
《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件，它为网页表单输入框提供了自动补全功能，极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...
**jQuery Autocomplete 知识详解** jQuery Autocomplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，极大地提升了用户在网站上的交互体验。这个插件源自于 jQuery UI 库，但也可以单独使用。...
标题中的“jQuery Autocomplete DWR结合 修改Data”指的是在Web开发中使用jQuery UI的Autocomplete组件与Direct Web Remoting (DWR)技术相结合，并对数据进行定制化处理的方法。jQuery Autocomplete是一个流行的UI...
jQuery Autocomplete是一款非常实用的JavaScript插件，它允许用户在输入框中输入文字时，根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用，如搜索框、表单输入等。在给定的“jquery ...
`jQuery autocomplete` 是jQuery UI库中的一个组件，它为输入框提供了自动完成的功能，能够根据用户输入的文本动态地从服务器获取并显示建议的匹配项。这个功能对于提高用户体验，特别是处理大量数据时，如搜索或者...
**jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全功能，能够极大地提升用户体验。这个插件基于 jQuery 库，因此需要先引入 jQuery 才能使用。在本文...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件，它为HTML输入框提供了自动补全功能，极大地提升了用户体验。这个插件基于jQuery库，结合Ajax技术，能够实时从服务器获取...
在IT行业中，jQuery Autocomplete是一个常用的插件，用于实现类似于搜索引擎的自动补全功能。它为用户提供了方便快捷的输入体验，尤其适用于大型数据集的筛选。本项目以"jQuery Autocomplete 仿百度搜索 只能搜索...
**jQuery AutoComplete 知识详解** `jQuery AutoComplete` 是一个非常流行的 JavaScript 库，它扩展了 jQuery UI 框架，为输入框提供自动补全功能。这个组件广泛应用于网页表单，尤其是在用户需要输入搜索关键词...
1，本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现，解决了多音字匹配问题。 2，由于用了Linq查询，所以至少需要.NET Framework 3.5。 4，由于jquery匹配时的match项和result项来自不同...
《jQuery Autocomplete 智能联想框JS实现详解》 在网页开发中，为了提高用户体验，经常需要使用到一种功能——智能联想框。这个功能可以让用户在输入框中输入文字时，自动显示与输入内容相关的建议，就像百度搜索...
**jQuery Autocomplete 知识点详解** jQuery Autocomplete 是一个非常流行且实用的插件，它为HTML输入字段提供自动完成功能。这个插件基于 jQuery 库，使得在网页中实现类似百度搜索框那样的动态下拉建议变得简单易...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
**jQuery autoComplete 知识点详解** `jQuery autoComplete` 是一个基于 jQuery 库的插件，它为网页表单输入框提供了自动完成的功能。这个插件能够帮助用户在输入时快速匹配并显示预先设定的数据集，通常用于提升...
**jQuery AutoComplete 插件详解** jQuery AutoComplete 是一个非常流行的前端插件，它为输入框提供了自动补全的功能，极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库，因此，使用前需要先引入 ...
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 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，广泛应用于网页表单、搜索框等场景，以提高用户体验。这个插件允许开发者从本地数组或...
**jQuery Autocomplete** 是一个非常流行的JavaScript库，用于在输入框中实现自动补全功能。这个功能在网页表单中非常常见，可以极大地提升用户体验，尤其是处理大量数据时，如搜索框、地址输入等。jQuery ...
**jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全功能，常用于搜索框、表单输入等场景，极大地提升了用户体验。本篇将详细介绍如何使用 jQuery ...