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

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