flexbox自动完成

1.引入文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<link href="/css/flexbox/main.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="/css/flexbox/jquery.flexbox.css" />

<script type="text/javascript" src="/js/flexbox/jquery.flexbox.js"></script>

2.获取json数据

$(function() {

        // Default, when the number of results exceeds the paging threshold

        ajaxgetteacher("<!--{$aData.user_name}-->");

        //alert("<!--{$aData.user_name}-->");

      });

      function ajaxgetteacher(teachername){

            $.ajax({

                    type:"POST",

                    url:"/default/index/ajax/do/getteacher",

                    data:"",

                    success:function(response){

                        var teachers = {};

                        teachers.results = eval('('+response+')');

                        teachers.total = teachers.results.length;

                        $('#user_id').flexbox(teachers,{

                          initialValue: teachername

                        });

                    }

                });

        }

3.php获取数据

case "getteacher":

                $aTeaInfo = $daoTeacher->getTeacher();

                foreach($aTeaInfo as $k=>$v){

                    $teainfo[$k]['id'] = trim($v['user_id']);

                    $teainfo[$k]['name'] = trim($v['realname']);

                }

                $teainfo = json_encode($teainfo);

                echo $teainfo;

                break;

4.写入界面

<div id="user_id">

                          </div>

效果如下：