jquery 自动弹出层效果代码(1/2)
<script type="text/网页特效" src="网页特效/jquery/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css教程" href="js/jquery/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$("#level1name").autocomplete("levelautocompleteajaxaction.do");
$("#level2name").autocomplete("levelautocompleteajaxaction.do");
$("#level3name").autocomplete("levelautocompleteajaxaction.do");
});
</script>
<input type="text" id="level1name" />
<input type="text" id="level2name" />
<input type="text" id="level3name" />
使用时$("#level1name")为<input type="text" id="level1name" />中的id,
autocomplete("levelautocompleteajaxaction.do")为发送的url,ajax请求地址
几行代码,如此简单而已!
说明一下为了支持中文输入,需要修改jquery.autocomplete.js文件的几个地方,在文件的190多行左右,加上如下代码:
.bind("input", function() {
// @hack by liqt:support for inputing chinese characters in firefox
onchange(0, true);
})
方法二自动弹出层
//显示listbox
function showlstbox()
{
var txtbox = window.document.getelementbyid("textbox1");
var lstbox = window.document.getelementbyid("listbox1");
var strinput = txtbox.value;
var arrmatch = new array();//用以匹配的字符串数组
var strmatch; //匹配成功的字符串
arrmatch = ["1111", "aaa", "klkk1", "akl1", "2222a", "ccc","南昌","南昌市高新区"];
removeall("listbox1")
for (var i = 0; i < arrmatch.length; i++)
{
strmatch = arrmatch[i];
if (strmatch.indexof(strinput) >= 0)
{
var opt = document.createelement("option");
opt.text = arrmatch[i].tostring();
opt.value = arrmatch[i];
lstbox.add(opt);
}
}
if (lstbox.haschildnodes())
{
lstbox.style.display = "block"; //显示
}
else
{
lstbox.style.display = "none";//隐藏
}
}
//将id为listid的列表中的内容全部移除
function removeall(listid)
{
var lst = window.document.getelementbyid(listid);
var length = lst.options.length;
for (var i = length; i > 0; i--)
{
lst.options[i - 1].parentnode.removechild(lst.options[i - 1]);
}
}
//将listbox中选中项的内容复制到文本框中
function moveselect() {
var txtbox = window.document.getelementbyid("textbox1");
var lstbox = window.document.getelementbyid("listbox1");
var length = lstbox.options.length;
for (var i = 0; i < length; i++)
{
var lstindex = lstbox.selectedindex;
if (lstindex < 0)
return;
txtbox.value = lstbox.options[lstindex].text;
}
//复制完成后隐藏listbox
lstbox.style.display = "none";
}
补充:asp.net教程,.Net开发