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

来源:互联网 发布:众泰电动车知豆 编辑:程序博客网 时间:2024/05/16 19:48

通常,在我们使用百度的时候,在输入框中输入某一个字段的时候,就可以查询到相关的信息。类似的功能可以通过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();                }        });    }
0 0