jquery-ui-1.11 autocomplete使用
2015-09-22 18:17
591 查看
说起来,感觉这个控件略显矫情
直接贴代码:
第一种
var url = "../goods/autoComplete";
var cache = {}, lastXhr;
$( "#goodsName" ).autocomplete({
source:function (request,response){
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, $.extend({ term: request.term, limit: 10 }, request), function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
},
minLength: 1,
focus: function( event, ui ) {
$( "#goodsName" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#goodsName" ).val( ui.item.name );
$( "#goodsId" ).val( ui.item.id );
return false;
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
return $("<li>")
.data("item.autocomplete", item)
.append( item.name )
.appendTo( ul );
};
第二种:
var url = "../shop/autoComplete";
var cache = {}, lastXhr;
//查询
$( "#goodsShopSelect" ).autocomplete({
source:function (request,response){
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, $.extend({ term: request.term, limit: 10 }, request), function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
},
minLength: 1,
focus: function( event, ui ) {
$( "#goodsShopSelect" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#goodsShopSelect" ).val( ui.item.name );
$( "#goodsShopId" ).val( ui.item.id );
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $("<li></li>")
.data("item.autocomplete", item)
.append( item.name )
.appendTo( ul );
};
html:
<input type="text" id="shopNameCn" name="shopNameCn">
<input type="hidden" id="shopId" name="shopId" />
<input type="text" id="recomGoodsName" name="recomGoodsName"/>
<input type="hidden" id="recomGoodsId" name="recomGoodsId" />
请选择性尝试
直接贴代码:
第一种
var url = "../goods/autoComplete";
var cache = {}, lastXhr;
$( "#goodsName" ).autocomplete({
source:function (request,response){
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, $.extend({ term: request.term, limit: 10 }, request), function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
},
minLength: 1,
focus: function( event, ui ) {
$( "#goodsName" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#goodsName" ).val( ui.item.name );
$( "#goodsId" ).val( ui.item.id );
return false;
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
return $("<li>")
.data("item.autocomplete", item)
.append( item.name )
.appendTo( ul );
};
第二种:
var url = "../shop/autoComplete";
var cache = {}, lastXhr;
//查询
$( "#goodsShopSelect" ).autocomplete({
source:function (request,response){
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, $.extend({ term: request.term, limit: 10 }, request), function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
},
minLength: 1,
focus: function( event, ui ) {
$( "#goodsShopSelect" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#goodsShopSelect" ).val( ui.item.name );
$( "#goodsShopId" ).val( ui.item.id );
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $("<li></li>")
.data("item.autocomplete", item)
.append( item.name )
.appendTo( ul );
};
html:
<input type="text" id="shopNameCn" name="shopNameCn">
<input type="hidden" id="shopId" name="shopId" />
<input type="text" id="recomGoodsName" name="recomGoodsName"/>
<input type="hidden" id="recomGoodsId" name="recomGoodsId" />
请选择性尝试
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象