jQuery autocomplete 组件使用

本文详细介绍了如何实现基于静态数据和远程数据的自动完成功能,包括数据源处理、缓存机制及AJAX请求的运用。

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

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);
     };
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值