jquery autocomplete样式
0
悬赏园豆：5
[已关闭问题]
关闭于 2010-08-06 10:03
我用了jquery autocomplete控件，可是样式表加上之后没有效果，不知道怎么回事。还请指教
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<link href="Styles/jquery.autocomplete.css" type="text/css" />
<script language="javascript" type="text/javascript">
//直接由数组获得
$(document).ready((function () {
var data = ["河北省", "河南省", "山东", "北京", "天津"];
$("#txtProvince").autocomplete(data);
//由SERVER端获得
$("#txtUser").autocomplete("GetUserName.aspx");
}
));
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
省份：<input id="txtProvince" type="text" />
</div>
<div>
用户名：<input id="txtUser" type="text" /></div>
</form>
</body>
</html>
所有回答(2)
0
查看下jQuery.AutoComplete.js文件388行
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",//自动提示效果
loadingClass: "ac_loading",
这边的样式类名和jQuery.AutoComplete.css中定义的是否是一样
JS脚本：
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
--------
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
今天早上突然发现了自己犯得是一个低级错误啊，少写了rel="stylesheet"。不过还是谢谢了
0
没有出现不见得就是样式的问题。Styles/jquery.autocomplete.css 足矣。
可能是js代码不完整吧。
$(document).ready(function(){
$('#tbxcust_code').autocomplete("../Hotline/CustInfoHandler.ashx",
{//检索显示样式
minChars: 4,
width: 310,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row[0] + "\" [" + row[1] + "]";
},
formatMatch: function(row, i, max) {
return row.name + " " + row.to;
},
formatResult: function(row) {
return row[1];
}
}
);
//enter完成触发事件
function findValueCallback(event, data, formatted) {
var tax =data[1];
$.post("GetCustomerWebService.asmx/GetCustInfoByCustId",
{codeCode:tax},
function(msg){
var myjson;
eval('myjson='+$('string',msg).text()+';');
$('#tbxcust_code').val(myjson.CustCode);
$('#tbxcust_name').val(myjson.CustName);
$('#tbxaddress').val(myjson.CustAddress);
$('#hiddentimer').val(myjson.CustReturnTimer);
$('#tbxtel').val(myjson.tel);
$('#txtContact').val(myjson.cust_contact);
$('#hiddenID').val(myjson.cust_id);
document.getElementById("timer").innerText="本年度第 "+myjson.CustReturnTimer+" 次上门回访。";
}
);
$(document).ajaxError(function(event,request, settings){
alert("出错页面:" + settings.url + "");
});
上面的例子经过测试。检查一下看看那有问题。
今天早上突然发现了自己犯得是一个低级错误啊，少写了rel="stylesheet"。不过还是谢谢了
