autocomplete实现搜索词自动提醒功能

最新推荐文章于 2021-05-27 01:56:04 发布

yangjizhong

最新推荐文章于 2021-05-27 01:56:04 发布

阅读量200

点赞数

分类专栏： jquery 文章标签： autocomplete

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

从代码中我们只需在前端引入：

三行。

然后为指定输入框提供查询数据即可：

$("#website").autocomplete(websites,{});

我们还可以根据实际情况添加可选项：

$("#website").autocomplete(websites,{

max: 12, //列表里的条目数

width: 400, //提示的宽度，溢出隐藏

scrollHeight: 300, //提示的高度，溢出显示滚动条

matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

autoFill: false, //是否自动填充

});