jquery+autocomplete+json 操作

最新推荐文章于 2015-12-08 17:14:01 发布

花郎

最新推荐文章于 2015-12-08 17:14:01 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： autocomplete json jquery function stylesheet user

本文链接：https://blog.youkuaiyun.com/lzy_1515/article/details/7587882

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用jQuery的Autocomplete插件和JSON数据进行搜索功能的实现。通过加载jQuery库和Autocomplete插件的JS及CSS文件，设置文本框，并在JavaScript中配置Autocomplete选项，如数据来源、格式化函数和选中后的处理。后台以search.ashx处理请求并返回JSON数据，当用户选择搜索结果时，会跳转到对应链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//jquery 类库
<script type="text/javascript" src="http://jquery.bassistance.de/autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js'></script>

//css样式
<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" />

//页面需要一个文本框
搜索：<input type="text" name="q" id="query_s" style="width:300px" />

//js脚本
<script type="text/javascript">

$().ready(function() {

             function format(mail) {
                 return mail.name
             }

             $("#query_s").focus().autocomplete('search.ashx, {
                 multiple: false,   //是否允许搜索框追加
                 //             multipleSeparator: ',', //搜索框追加后缀格式如：搜索值1,搜索值2

                 dataType: "json", //json类型
                 parse: function(data) {
                     return $.map(data, function(row) {
                         return {
                             data: row,
                             value: row.name,
                             result: row.name
                         }
                     });
                 },
                 formatItem: function(item) {
                     return format(item);
                 }
             }).result(function(e, item) {
                 window.location.href = item.to; //选中后跳转
   //$("#content").append("<p>selected " + format(item) + "</p>"); 指定一个div显示信息
             }
                );