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>

效果如下：