AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户。
如百度搜索下输入'a'时的提示：
其实我们也可以很方便的实现，autocomplete就是实现该功能的利器：
官网：http://jqueryui.com/demos/autocomplete/
autocomplete需要的数据源可以为：本地数据和远程数据
本地数据源为本地js数组或本地的json对象，如：
var data = ["c++","java", "php", "coldfusion","javascript"];
var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
在使用远程地址时，它默认传入的参数是：q（输入值），limit（返回结果的最大值），可以使用extraParams传入其他的参数，而且远程数据源是需要固定格式的数据，返回结果：使用“\n”分割每行数据，每行数据中使用“|”分割每个元素，如：
string data = "c++\n java \n php \n coldfusion \n javascript";
一个最简单的Autocomplete（自动完成）代码片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "我爱北京", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites,{});
});
</script>
</head>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
</body>
</html>
从代码中我们只需在前端引入：
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
三行。
然后为指定输入框提供查询数据即可：
$("#website").autocomplete(websites,{});
我们还可以根据实际情况添加可选项：
$("#website").autocomplete(websites,{
max: 12, //列表里的条目数
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //是否自动填充
});
以上参数基本可满足我们的需求了。
另：
附件提供了DEMO，大家可体验下。
- 大小: 21.3 KB
分享到：
相关推荐
标题中的“autocomplete实现百度搜索自动填充特效”是指在网页中实现类似于百度搜索框的自动完成功能，这种功能能够根据用户输入的字符实时提供匹配的建议列表，提高用户的输入效率和搜索体验。在Web开发中，这是一...
用java实现autocomplete搜索功能，可以获取除输入框的其它动态参数，后台字符串拼接，返回json数据，格式如下： { query:'Li', suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'...
利用jquery.autocomplete.js插件实现了文本框自动补全的功能， 附件包含两个实例代码，均以txt文档显示，都有前台和后台代码。一个是传一个参数，一个是传两个参数，后台以一般处理程序ashx文件编写。大家只需要修改...
在IT行业中，自动补全（Autocomplete）是一种常见的用户体验优化技术，它被广泛应用于各种输入框，如搜索引擎、文本编辑器、编程IDE等。自动补全功能能够根据用户输入的部分内容，实时预测并显示可能的完整词汇或...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
在压缩包“autoComplete”中，可能包含实现搜索词自动完成的相关代码、数据结构、算法描述或者示例。一般来说，这类实现可能涉及以下几个关键知识点： 1. **数据存储与预处理**：为了快速响应用户输入，需要将历史...
在Bootstrap Autocomplete中，通常使用简单的字符串包含或正则表达式来实现，当用户输入一部分文本时，插件会自动过滤出匹配的选项。 5. **事件监听**：为了响应用户的输入，我们需要监听`keyup`或`keydown`等键盘...
本篇将基于标题"autocomplete结合后台实现自动感知"来深入探讨如何实现这一功能，以及相关知识点。 首先，我们需要理解autocomplete的基本原理。它主要是通过预测用户可能要输入的词汇或短语，并在用户输入时提供...
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...
在layui中，"autocomplete"是一款自动填充插件，常用于输入框，提供智能提示功能，提高用户输入效率。这款插件适用于各种需要自动补全场景，如搜索框、表单填写等。 在layui的autocomplete插件中，主要涉及以下知识...
这里，我们创建了一个输入框，并使用`$("#autocomplete-input").autocomplete()`初始化Autocomplete功能。`source`参数可以是数组，也可以是函数或URL，用于获取建议数据。 ### 后端Controller实现 #### Java ...
**jQuery Autocomplete 实现：自动填充与连续选择详解** jQuery Autocomplete 是一个强大的插件，它为输入框提供了自动填充功能，通常用于提高用户输入效率和用户体验。在 Web 应用程序中，当用户在搜索框中键入...
在IT行业中，自动匹配检索（Autocomplete）是一项广泛应用于各种搜索框和输入字段的功能，它极大地提升了用户体验，尤其是在处理大量数据时。"autocomplete高效自动匹配检索功能"的标题揭示了我们要探讨的核心技术，...
在Web开发中，为了提升用户体验，自动填充（Autocomplete）功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件，名为jQuery UI Autocomplete，它可以帮助开发者轻松实现这种功能。...
在IT领域，自动补全（Autocomplete）是一项非常实用的功能，它广泛应用于各种软件和编程环境中，以提高用户的输入效率。自动补全功能基于用户输入的部分文本，预测并提供可能的完整词汇或命令，帮助用户快速完成输入...
在ASP.NET Web应用程序中，AutoComplete功能通常用于提高用户体验，特别是在输入字段中提供即时建议，以帮助用户快速完成填写表单。本篇文章将深入探讨如何使用ASP.NET的Ajax技术实现下拉框的自动填充功能。 首先，...
在本项目中，"ibatis +spring+struts2+jquery.autocomplete实现产品自动补全功能（二） 附带源码"，我们探讨的是如何整合四大技术来创建一个高效且用户友好的Web应用程序，特别是在搜索框中实现产品名称的自动补全...
ASP.NET 下使用 jQuery.AutoComplete 实现商品搜索自动完成功能，主要涉及到前端 JavaScript 库 jQuery 及其插件 jQuery.AutoComplete，以及后端 ASP.NET 的数据库交互。这个功能旨在提供类似于淘宝和谷歌搜索的用户...
在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...