使用jquery autocomplete实现类似搜索引擎的自动填充功能

最新推荐文章于 2022-11-28 13:22:37 发布

_Chris

最新推荐文章于 2022-11-28 13:22:37 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/rj532029887/article/details/41121103

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一，效果演示：

二，实现步骤

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

}

_Chris

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jquery autocomplete实现类似搜索引擎的自动填充功能

一，效果演示：二，实现步骤 1，利用前台数据进行填充提示 jQuery UI Autocomplete - Default functionality //为了演示方便，这三个连接我是从官方链接过来的，这里直接粘贴就能使用。但是最好还//是下载到本地使用 $(function
复制链接

扫一扫