JQuery UI autocomplete自动补全插件搜索结果去除提示
来源:互联网 发布:捕鱼 机器人算法 编辑:程序博客网 时间:2024/06/06 07:15
最近有个后台管理系统要用到自动检索并补全信息的功能,所以我就用到JQuery UI的autocomplete插件,插件挺好用的,api也讲解也挺全的,学习成本低,如果大家有自动补全功能的需求可以去看看。在功能基本完成之后我发现这个自动补全搜索出来的结果总是在结果的最上面出现一行英文的提示,大致意思是告知用户搜索的结果符合要求的有多少条,虽然是一片好心但是导致样式一点都不好看,如下图:
找API也没有发现可以去除这个样式的参数可设置,后来终于找办法了。解决办法如下面代码蓝色字体:
$('#company').autocomplete({
source: function(query, process){
var cityVal = $('#city').val();
if(cityVal > 0){
$.ajax({
type : 'POST',
dataType : 'json',
url : '${pageContext.request.contextPath}/companyGrade/getCompanyInfo',
data : {'cityId': cityVal, 'searchParam': $('#company').val()},
success : function(data) {
if (data.code == 1) {
process( $.map( data.data, function(item){
return {
label: item.companyName,
value: item.companyName,
companyId: item.companyId
}
}));
}else{
return;
}
},
error: function() {
alert('网络异常 请稍后再试');
}
});
}else{
alert("请先选择城市");
return;
}
},
select: function(event, ui){
$('#comId').val(ui.item.companyId);
$.ajax({
type : 'POST',
dataType : 'json',
url : '${pageContext.request.contextPath}/companyGrade/getCompanyGrade',
data : {'companyId': ui.item.companyId},
success : function(data) {
$('#comId').val(ui.item.companyId);
if (data.code == 1) {
$('#infoPercent').val(data.data.companyInfoPercent);
}else{
$('#infoPercent').val('');
}
},
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert('网络异常 请稍后再试');
}
});
},
messages: {
noResults: '',
results: function(){
}
}
});
source: function(query, process){
var cityVal = $('#city').val();
if(cityVal > 0){
$.ajax({
type : 'POST',
dataType : 'json',
url : '${pageContext.request.contextPath}/companyGrade/getCompanyInfo',
data : {'cityId': cityVal, 'searchParam': $('#company').val()},
success : function(data) {
if (data.code == 1) {
process( $.map( data.data, function(item){
return {
label: item.companyName,
value: item.companyName,
companyId: item.companyId
}
}));
}else{
return;
}
},
error: function() {
alert('网络异常 请稍后再试');
}
});
}else{
alert("请先选择城市");
return;
}
},
select: function(event, ui){
$('#comId').val(ui.item.companyId);
$.ajax({
type : 'POST',
dataType : 'json',
url : '${pageContext.request.contextPath}/companyGrade/getCompanyGrade',
data : {'companyId': ui.item.companyId},
success : function(data) {
$('#comId').val(ui.item.companyId);
if (data.code == 1) {
$('#infoPercent').val(data.data.companyInfoPercent);
}else{
$('#infoPercent').val('');
}
},
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert('网络异常 请稍后再试');
}
});
},
messages: {
noResults: '',
results: function(){
}
}
});
这里我贴出了ajax异步动态向后台数据库取出检索内容,以便大家参考,希望能对正在用这个插件的你们能有所帮助。我觉得挺方便的。蓝色字体就是去除上图中英文提示的方法,希望能帮助更多人解除疑惑。另外如果对以上代码有疑惑的可以找我,对了,补充一下:我的后台用的Java spring MVC+Mybatis写的。
1 0
- JQuery UI autocomplete自动补全插件搜索结果去除提示
- jquery autocomplete 搜索框提示 输入自动补全
- jquery 自动补全插件autocomplete
- jquery 自动补全插件 autocomplete
- 自动补全插件 jquery.autocomplete
- 自动完成autoComplete,自动补全插件,输入提示
- Jquery autocomplete自动补全
- Autocomplete 自动补全JQuery
- jQuery.autocomplete自动补全
- 用jquery-ui Autocomplete一步一步实现输入自动补全
- jquery-autocomplete搜索关键字自动补全效果(类似于google)
- jQuery autocomplete 自扩展插件、自动补全示例
- jQuery autocomplete 自扩展插件、自动补全示例
- jquery.autoComplete文本框查询自动补全插件支持中文
- jquery autocomplete插件 实现输入框自动补全
- 自动补全插件jquery.autocomplete.js的使用
- jquery UI Autocomplete 自动提示
- WinForm AutoComplete 输入提示、自动补全
- Android获取验证码后倒计时程序
- android虚拟按钮问题
- Timus 1888. Pilot Work Experience
- swift:Declaration is only valid at file scope问题解决
- iOS多线程编程技术之NSThread、Cocoa NSOperation、GCD
- JQuery UI autocomplete自动补全插件搜索结果去除提示
- JavaScript学习 CodeWars 打怪升级日记 判断输入字符串是否符合IPv4地址标准
- 获取内置和外置存储路径
- 解决Exception raised during rendering: com/android/util/PropertiesMap (Details)
- JAVA实现地图最短路径问题
- 一个总结比较好的ansible博客
- c语言指针的初始化和赋值
- 设计模式——简单工厂(又叫静态工厂方法,不属于GOF23中设计模式)
- post/get请求(http,https)工具类