请问jquery.autocomplete 怎样使它的提示框一开始加载页面时候就显示出来,而不是需要通过单击文本框,或者输入字符
问题原因:我通过jquery.autocomplete
/***************************************/
想要通过js 改变传入的json的值 从而改变提示框内显示的内容
但是如果一开始不能显示下拉提示框的话 就会出现多个下拉提示框重叠的现象,请各位高人 帮我解决 非常感谢(附件 是我写的一个demo)
如
var stockInfoJson1 = [
{ name: "深发展A", code: "000001",spell:"sfza" },
{ name: "万科A", code: "000002",spell:"wka"},
{ name: "ST 国 农", code: "000004",spell:"stgn" },
{ name: "世纪星源", code: "000005",spell:"sjxy" },
{ name: "深振业A", code: "000006" ,spell:"szya"},
{ name: "ST 达 声", code: "000007" ,spell:"stds"},
{ name: "ST宝利来", code: "000008" ,spell:"stbll"},
{ name: "中国宝安", code: "000009" ,spell:"zgba"},
{ name: "S ST华新", code: "000010" ,spell:"ssthx"},
{ name: "山航B", code: "200152" ,spell:"shb"},
{ name: "*ST帝贤B", code: "200160" ,spell:"stdxb"},
{ name: "雷伊B", code: "200168" ,spell:"lyb"},
{ name: "宝石B", code: "200413",spell:"bsb" },
{ name: "小天鹅B", code: "200418" ,spell:"xteb"},
{ name: "粤高速B", code: "200429" ,spell:"agsb"},
{ name: "宁通信B", code: "200468" ,spell:"ltxb"},
{ name: "晨鸣B", code: "200488" ,spell:"cmb"},
{ name: "珠江B", code: "200505" ,spell:"zjb"},
{ name: "闽灿坤B", code: "200512" ,spell:"mskb"},
{ name: "华电国际", code: "600027" ,spell:"hdgj"}
];
var stockInfoJson2 = [
{ name: "深发展A", code: "000001",spell:"sfza" },
{ name: "万科A", code: "000002",spell:"wka"},
{ name: "ST宝利来", code: "000008" ,spell:"stbll"},
{ name: "中国宝安", code: "000009" ,spell:"zgba"},
{ name: "S ST华新", code: "000010" ,spell:"ssthx"},
{ name: "ST 国 农", code: "000004",spell:"stgn" }
];
////////////////////////////////////////////////////////////////////////////////////////////
$("#suggest1").autocomplete(stockInfoJson, {
minChars: 1,
matchCase:false,//不区分大小写
autoFill: false,
max: 10,
formatItem: function(row, i, max,term) {
//$("
$("#suggest1").result(function(event, data, formatted) {
//如选择后给其他控件赋值,触发别的事件等等
alert("success");
});
/***************************************/
想要通过js 改变传入的json的值 从而改变提示框内显示的内容
但是如果一开始不能显示下拉提示框的话 就会出现多个下拉提示框重叠的现象,请各位高人 帮我解决 非常感谢
1.怎样使它的提示框一开始加载页面时候就显示出来
这个本身是很简单的,就是通过触发点击事件来进行的。
2.想要通过js 改变传入的json的值 从而改变提示框内显示的内容
关于这个,我可能要批一下jquery.complete.js了,其本身的功能只支持一维数组和远程json(至少我用的版本是这样子的),并且访问本地数组数据是会直接缓存到cache中去。
想要实现对提示内容的控制,就需要对原有控件进行扩展。
我的思路是扩展一个功能,使得jquery支持function的动态结果,那么只需要将
[code="js"]$("#ac").autocomplete(arr, {...});[/code]
改变为
[code="js"]$("#ac").autocomplete(function(){return ...}, {...});[/code]
那么只需要在function设置动态返回结果内容,就可以实现提示框内数据的切换。
贴个示例,主要变动有两个部分
(一)
[code="js"] $.fn.extend({
autocomplete : function(urlOrData, options, initDate) {
// 判断是否是URL
var isUrl = typeof urlOrData == "string";
var isFun = typeof urlOrData == "function";
options = $.extend({}, $.Autocompleter.defaults, {
url : isUrl ? urlOrData : null,
fun : isFun ? urlOrData : null,
data : isUrl ? null : urlOrData,
data2 : initDate,
delay : isUrl
? $.Autocompleter.defaults.delay
: 10,
max : options && !options.scroll ? 10 : 150
}, options);
[/code]
(二)
[code="js"] function request(term, success, failure, init) {
if (!options.matchCase)
term = term.toLowerCase();
var data = cache.load(term);
if (init)
data = cache2.load(term);
// recieve the cached data
if (data && data.length) {
success(term, data);
// if an AJAX url has been supplied, try loading the data now
} else if ((options.fun && typeof options.fun == "function")) {
var rowArray = new Array();
var data = options.fun();
for (var i = 0, ol = data.length; i < ol; i++) {
var rawValue = data[i];
rawValue = (typeof rawValue == "string")
? [rawValue]
: rawValue;
var value = options.formatMatch(rawValue, i + 1,
data.length);
if (value === false)
continue;
var firstChar = value.charAt(0).toLowerCase();
var row = {
value : value,
data : rawValue,
result : options.formatResult
&& options.formatResult(rawValue) || value
};
rowArray.push(row);
};
cache.add(term, rowArray);
success(term, rowArray);
} else if ((typeof options.url == "string")
&& (options.url.length > 0)) {
var extraParams = {
timestamp : +new Date()
};
$.each(options.extraParams, function(key, param) {
extraParams[key] = typeof param == "function"
? param()
: param;
});
$.ajax({
// try to leverage ajaxQueue plugin to abort
// previous requests
mode : "abort",
// limit abortion to this input
port : "autocomplete" + input.name,
dataType : options.dataType,
url : options.url,
data : $.extend({
q : lastWord(term),
limit : options.max
}, extraParams),
success : function(data) {
var parsed = options.parse
&& options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
}
});
} else {
select.emptyList();
failure(term);
}
};[/code]