实现类似百度搜索框中模糊提示功能

通常,在我们使用百度的时候,在输入框中输入某一个字段的时候,就可以查询到相关的信息。类似的功能可以通过JS的框架来实现(显然不会像百度那么强大)。jquery提供了一种扩展插件。可以实现获取文本框内容然后自动向后台提交请求。下面通过一段代码来展示这种功能。

在使用这种扩展插件的时候,需要使用到这里写图片描述
这两个文件。
通过如下代码:

$(function(){
        applymentAutoComplete("input[name='providerName']");    
    });

表示在页面初始化的时候就启动这种自动请求的方式。

function applymentAutoComplete(objname){
        $(objname).autocomplete({
            source:function(request,response){
                $.ajax({
                    url: basePath+"/page/applyment/searchallproviderinfo",
                    type:"post",
                    data: {providerName:$("#providername").val()},
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success: function(data) {
                        var jsondata = [];
                        var providerinfolist = data.o;
                        var length = data.o.length;
                          for(var i=0;i<length;i++) 
                          {  
                              //声明一个字符对象,用来存所需要的值
                              var providerinfo = {};
                              //一个搜索字符所包含的值
                              var providerid = "";
                              var providername = "";
                              //这里只能填写id和value。不能换成其他字符串
                              //和下面的jquery选择器选择的内容对应
                            providerinfo.id = providerinfolist[i].providerid;
                              providerinfo.value = providerinfolist[i].providername;
                              jsondata.push(providerinfo);
                          }
                          response(jsondata);
                    },
                }); 
            },
            minLength:1,
            delay: 500,
            select: function(event,ui){
                  $("input[name='providerid']").val(ui.item.id);
                  $("input[name='providerName']").val(ui.item.value);
                  event.preventDefault();
                }
        });
    }
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值