说起来,感觉这个控件略显矫情
直接贴代码:
第一种
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" />
请选择性尝试