一,效果演示:
二,实现步骤
1,利用前台数据进行填充提示
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> //为了演示方便,这三个连接我是从官方链接过来的,这里直接粘贴就能使用。但是最好还
//是下载到本地使用
<script>
$(function () {
var availableTags = ["ActionScript", "李小龙",
"李逵", "Asp", "BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
"Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
"Python", "Ruby", "Scala", "Scheme"];
$("#tags").autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
三,上面是一个简单的本地完整示例,下面利用后台返回的数据进行显示(这里用asp.net mvc实现,其实都一样)
1,前台页面
@{
ViewBag.Title = "Index2";
Layout = null;
}
@*<link href="Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-ui-1.8.20.js"></script>*@//我把官方的连接替换掉了,如果不成功,你可以去掉注释,同时把下面的三个本地引用去掉
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script>
$(function () {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("TeacherJson", "Test")',
type: "POST",
dataType: "json",
data: { TeacherInput: request.term },
success: function (data) {
response(
$.map(
data,
function (item) {
return {
label: item.TeacherName,
value: item.TeacherName,
posttitle: item.PostTitle
}
} //end function (item)
)//end map
); //end response
} //end success
}); //end ajax
}
});
});
</script>
<h2>Index2</h2>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
2,后台代码
namespace MvcGuestBook.Controllers
{
public class TestController : Controller
{
//构造一个返回Teacher类型的IEnumerable泛型方法
public IEnumerable<Teacher> MyTeacherList()
{
List<Teacher> teacherList = new List<Teacher>();
Teacher t1 = new Teacher { TeacherName = "李小龙", TeacherNo = "001", PostTitle = "教授" };
Teacher t2 = new Teacher { TeacherName = "李逵", TeacherNo = "002", PostTitle = "讲师" };
Teacher t3 = new Teacher { TeacherName = "张飞", TeacherNo = "003", PostTitle = "副教授" };
Teacher t4 = new Teacher { TeacherName = "张三", TeacherNo = "004", PostTitle = "讲师" };
Teacher t5 = new Teacher { TeacherName = "曾哥", TeacherNo = "005", PostTitle = "教授" };
//上面的数据从数据库中得到,你懂的
teacherList.Add(t1);
teacherList.Add(t2);
teacherList.Add(t3);
teacherList.Add(t4);
teacherList.Add(t5);
return teacherList.AsEnumerable();
}
public JsonResult TeacherJson(string TeacherInput)
{
var formateData = MyTeacherList()
.Select(x => new
{
TeacherName = x.TeacherName,
TeacherNo = x.TeacherNo,
PostTitle = x.PostTitle
});
formateData = formateData
.Where(x => x.TeacherName.Contains(TeacherInput));
return Json(formateData, JsonRequestBehavior.AllowGet);
}
}
public class Teacher
{
public string TeacherNo { get; set; } //教工号
public string TeacherName { get; set; } //名字
public string PostTitle { get; set; } // 职称
}//end class
}