前端异步搜索

<link rel="stylesheet" href="/css/jquery-ui.css" >

<script type="text/javascript" src="/js/jquery-ui.min.js"></script>

引用js框架 jquery-ui.min.js   jquery-ui.css

https://pan.baidu.com/s/1i1ZEa9MgMClqbr8Cvzf57Q     提取码  b6zm  

<input type="text" name="" class="mic_select_text" placeholder="请输入或选择教师姓名" />

<script>
var userid;
var flag = true;
$(".mic_select_text").autocomplete({
    source: function(request, response){
         getPerson(request, response,1);
      },
      delay: 500 ,
      select: function( event, ui ) { // 选中某项时执行的操作
             // 存放选中选项的信息
             userid = ui.item.userid;
             flag = false;
      }      
});
function getPerson(request,response,role){
    $.ajax({
        url:"/demo/test",
        type:"post",
        dataType: "json",
        data:{
            "fid" :　$!{fid},
            "role" :　role,
            "key" :　request.term
        },
        success:function(data){
            //console.log(data);
            if(data.result&&data.data.length>0){
             response( $.map( data.data, function( item ) { // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数
                 console.log(item);
                 return {
                     // 设置item信息
                     label: item.realname, // 下拉项显示内容
                     value: item.realname,  // 下拉项对应数值
                     userid: item.userid  
                 }
              }));
            }
         }
     });
}