jquery.autocomplete.js经过修改，支持各种浏览器、支持中文输入！

最新推荐文章于 2016-10-14 15:37:15 发布

shadinfish

最新推荐文章于 2016-10-14 15:37:15 发布

阅读量308

点赞数

本文链接：https://blog.csdn.net/shadinfish/article/details/45249269

版权

</pre>html：<pre name="code" class="html"><!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>
		<script src="__PUBLIC__/js/jquery.js" type="text/javascript"></script>
		<script src="__PUBLIC__/js/jquery.autocomplete.js" type="text/javascript"></script>
		<link href="__PUBLIC__/css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			$(function() {
				$.ajax({
					contentType: "application/json",
					url: "{:U('Index/Index/demo')}",
					dataType: "text",
					success: function(data) {
						var msg = data;
						msg = eval("(" + data + ")");
						if (msg == null) {} else if (msg != null) {
							$("#input").autocomplete(msg, {
								minChars: 1, //最少输入字条
								max: 12,
								autoFill: false, //是否选多个,用","分开
								mustMatch: false, //是否全匹配, 如数据中没有此数据,将无法输入
								matchContains: true, //是否全文搜索,否则只是前面作为标准
								scrollHeight: 220,
								width: 500,
								multiple: false,
								formatItem: function(row, i, max) { //显示格式
									return "<span style='width:140px'>" + row.id + "</span><span style='width:120px'>" + row.bookname + "</span>";
								},
								formatMatch: function(row, i, max) { //以什么数据作为搜索关键词,可包括中文,
									return row.bookname;
								},
								formatResult: function(row) { //返回结果
									return row.id;
								}
							});
							$("#input").result(function(event, row, formatted) { //额外触发,可不要
								$("#output").val(row.id);
								//更多操作
							});
						}
					}
				});
			})
		</script>
	</head>

	<body>

		<p> </p>
		<p>请输入信息</p>
		<p>
			<input type="text" name="input" id="input" />
		</p>
		<p>额外触发信息</p>
		<p>
			<input type="text" name="output" id="output" />
		</p>
	</body>

</html>

后台代码：

public function demo() {
		$book=M('book')->field('id,bookname')->order('time desc')->limit(0,10)->select();
		$this->ajaxReturn($book);
	}

文中连接的其余插件可在这下载：

http://download.csdn.net/download/smallipis/4291438

上面程序将资源中的固定的数据输出改成了用ajax动态从数据库中提取输出。

shadinfish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.autocomplete.js经过修改，支持各种浏览器、支持中文输入！

html：自动完成测试 $(function() { $.ajax({ contentType: "application/json", url: "{:U('Index/Index/demo')}", dataType: "text", success: function(data) {
复制链接

扫一扫