根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
<html>
<head>
<title>jquery autocomplete demo</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<script src="<%=path%>/auto/jquery-1.7.1.min.js"></script>
<script src="<%=path%>/auto/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="<%=path%>/auto/jquery.autocomplete.css" />
<script type='text/javascript'>
//可改成ajax变成动态数据
var address = [
{ name: "西安", to: "xian" },
{ name: "北京", to: "beijing" },
{ name: "西宁", to: "xining" },
{ name: "西藏", to: "xizang" },
{ name: "天津", to: "tianjin" },
];
$(function(){
$('#keyword').autocomplete(address, {
max: 12, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最小字符
width: 200, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return row.name;
},formatMatch: function(row, i, max) {
return row.name + row.to;
},formatResult: function(row) {
return row.to;
}
});
});
</script>
</head>
<body>
<h1>jquery autocomplete demo</h1>
<h1>
<input type="text" id="keyword" style="width: 200px;"/>
</h1>
</body>
</html>
相关推荐
这个"jquery.autocomplete干净demo"提供了一个简洁且功能完备的示例，适用于那些寻找高效、易用的自动完成解决方案的开发者。 **1. jQuery Autocomplete 插件安装** 要使用 `jQuery Autocomplete`，首先确保你已经...
**jQuery AutoComplete 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，广泛应用于网页表单、搜索框等场景，以提高用户体验。这个插件允许开发者从本地数组或...
在压缩包文件“demo”中，可能包含了一个简单的示例项目，用于演示如何将jQuery Autocomplete与DWR结合以及如何修改数据处理。这个例子可能包括HTML、CSS、JavaScript以及Java代码，可以帮助开发者理解整个流程。...
**jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的前端开发插件，它能够为输入框提供自动补全功能，极大地提升了用户在网页上的交互体验。该插件基于JavaScript库jQuery，允许开发者轻松地为...
**jQuery Autocomplete** 是一个非常流行的JavaScript库，用于在用户输入时提供动态建议或自动完成。这个资源包包含了丰富的信息和实例，可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍...
《jQuery Autocomplete自动完成功能详解及实战演示》 在网页开发中，为了提高用户体验，我们经常需要实现一种叫做“自动完成”（Autocomplete）的功能，它可以在用户输入时提供匹配的建议，帮助用户快速找到他们想...
- `acbox_demo_13.zip` 可能是另一个Autocomplete组件的演示。 - `jquery.ddcombobox_8.zip` 可能是与下拉组合框相关的功能，虽然不是直接的Autocomplete，但可能有相似的用途。 - `autoComplete_3.zip` 再次提供了...
在提供的"autocomplete demo"文件中，可能包含了实现上述功能的完整示例，包括HTML、CSS和JavaScript代码。这个示例可以帮助你更好地理解如何将这些知识点应用到实际项目中。 ### 结语 jQuery Autocomplete组件是...
`jQuery.autocomplete`是jQuery UI库中的一个组件，它为输入框提供了自动补全功能，极大...在提供的`demo`文件中，可能包含了一个简单的`jQuery.autocomplete`使用示例，你可以参考并根据实际项目需求进行修改和扩展。
这个“jquery ui demo”正是一个展示jQuery UI功能的实例集合，通过它，我们可以深入理解和学习如何在实际项目中运用jQuery UI。 首先，jQuery UI 包含了多种组件，如对话框（Dialog）、日历（Datepicker）、拖放...
**jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全功能，极大地提升了用户体验。这个插件允许用户在输入时快速选择匹配的建议项，常见于搜索框、...
在lwme-jqueryui-demo这个压缩包中，可能包含了多个示例文件，它们展示了Autocomplete的不同用法和配置，可以帮助开发者更好地理解和运用这个组件。通过学习这些示例，你可以掌握如何根据项目需求灵活定制...
**jQuery UI Demo框架详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了各种可重用、可定制的UI组件，用于创建交互式的网页元素。本篇文章将深入探讨jQuery UI Demo框架，以及它如何...
**jQuery Autocomplete 插件详解及中文搜索支持** 在网页开发中，自动补全（Autocomplete）功能常常被用于提高用户输入效率，如搜索引擎、表单填充等场景。`jQuery UI`库提供了一个强大的`Autocomplete`插件，能够...
- **demo.html**: 示例页面，展示了如何在实际项目中集成并使用 `jQuery Autocomplete` 自增版。通过查看此文件，我们可以了解如何设置输入框、调用插件方法、配置参数等。 - **jquery.js**: 这是 jQuery 库的核心...
在压缩包中的 `acbox_demo` 文件夹中，你可以找到一个简单的 Autocomplete 示例。这个示例展示了如何使用静态数据源创建一个基本的自动完成输入框。通过查看代码，你可以了解 Autocomplete 的实际用法，并根据自己的...
在`MVCDemo`这个压缩包中，很可能包含了使用`jQuery.autocomplete.js`的一个完整示例。通常，这样的示例会包含HTML、CSS和JavaScript文件，以及可能的服务器端代码（如果使用了AJAX数据源）。开发者可以参考这个示例...
3. `demo.htm`：示例HTML文件，展示了Autocomplete插件的实际应用，帮助开发者理解如何在实际项目中使用。 4. `jquery.js`：jQuery核心库，提供基本的DOM操作、事件处理等功能。 5. `jquery.combobox.js` 和 `jquery...
"jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例，它实现了自动补全的功能，通常在输入框中输入文字时，会根据已输入内容动态显示匹配的建议列表。这种功能常见于搜索框、地址栏等场景，提高了用户输入...