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

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

在使用这种扩展插件的时候，需要使用到
这两个文件。
通过如下代码：

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

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

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();
                }
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39