jQuery autocomplete 组件使用

1.对于静态数据测试


$(  function () {
       //测试数据
       var  fastcity = [
           {
                value:  "nj nanjing 南京"  ,
                desc:  "南京"
           },{
                value:  "bi beijing 北京"  ,
                desc:  "北京"  ,
                
           }
     ];
     $(  "#birds"  ).autocomplete({
           source: fastcity,
           minLength: 1,
           focus:  function (event, ui) {
                $(   this ).val(ui.item.desc);
                   return   false ;
           },
           select:  function (event, ui) {
                $(   this ).val(ui.item.desc);
                   return   false ;
           }
     }).data(  "autocomplete" )._renderItem =  function (ul, item) {
              return  $(   "<li></li>"  )
                .data(   "item.autocomplete"  , item)
                .append(   "<a>" + item.desc +  "</a>" )
                .appendTo(ul);
     }
});





2.远程数据测试

$(  function () {
  
       var  cache = {};   //缓存
     $(  "# birds " ).autocomplete({
           minLength: 1,
           source:  function (request, response) {
                   var  term = request.term;
             if  (term  in  cache ) {   //缓存处理
                response($.map(cache[term],  function (item) {
                     return  {
                        value: item.desc,
                        desc: item.name
                    };
                }));
                 return ;
            }
           
             //获取数据来源
             var  url = $( "#webAppName"  ).val()+ "/project/add/autoComplete"   ;
            $.ajax({
                url: url,
                type:  "POST" ,
                dataType:  "json" ,
                data:{
                    searchItem: request.term
                },
                success:  function (data) {
                     console.log(data);
                    cache[term] = data;
                    response($.map(data,  function (item) {
                              return  {
                                value: item.desc,
                                desc: item.name
                           };
                    }));
                }
            });
                
           },
           focus:  function (event, ui) {
                $(   this ).val(ui.item.desc);
                   return   false ;
           },
           select:  function (event, ui) {
                $(   this ).val(ui.item.desc);
                   return   false ;
           }
     }).data(  "autocomplete" )._renderItem =  function (ul, item) {
              return  $(   "<li></li>"  )
                .data(   "item.autocomplete"  , item)
                .append(   "<a>" + item.desc +  "</a>" )
                .appendTo(ul);
     };
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值