<style>
#showUser5 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser1 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser2 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser3 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser4 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser6 table, table tr th, table tr td {
border: 1px solid #0094ff;
}
#showUser5 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
#showUser1 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
#showUser2 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
#showUser3 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
#showUser4 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
#showUser6 table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
</style>
<script type="text/javascript" charset="utf-8">
var source = "";
var inputValue = "";
function initialize() {
//source = '{"ProjectId":"28081","PROJECTNAME":"广州正佳广场"}';
source = "";
elemCSS = { focus: { 'color': 'black', 'background': '#ccc' }, blur: { 'color': 'black', 'background': 'transparent' } };
inputUse = document.getElementById("txtlc1");
showUse = document.getElementById("showUser");
var bodyDiv = document.getElementById("bodyDiv");
showUse.style.display = "none";
inputUse.style.width = bodyDiv.style.width;
showUse.style.width = bodyDiv.style.width;
inputValue = inputUse.defaultValue;
}
function inputFocus() {
//调用setInterval()函数每200ms刷新一次
this.timer = setInterval(function () {
if (inputUse.value != '') {
//检查文本框的当前值与以前的值是否有变化
var NowInpuValue = inputUse.value;
if (NowInpuValue != inputValue) {
//如果文本框当前值与之前的值不同，记录当前值，已被下次调用时使用
inputValue = NowInpuValue;
//清除上次调用显示的结果
showUse.innerHTML = '';
if (inputValue != '') {
//定义JS的RegExp对象，查询以inputValue开头的数据
quickExpr = RegExp('^' + inputValue);
//如果数据源不为空，则调用match函数开始匹配数据
//此处如果通过ajax取数据，则适当修改数据源即可
//GetSource(inputValue);
//if (source) {
// match(quickExpr, inputValue, source);
//}
match(quickExpr, inputValue, source,'');
}
}
}
else {
inputValue = inputUse.value;
showUse.innerHTML = '';
showUse.style.display = "none";
}
}, 200)
}
//通过Ajax获取数据源
function GetSource(value,e) {
jQuery.ajax({
url: '../ax/AjaxShopGetBrandNameHandler.ashx',
type: 'GET', //GET
async: true, //或false,是否异步
data: {
BrandName: encodeURI(encodeURI(value)), type: 'pp'
},
timeout: 5000, //超时时间
dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend: function (xhr) {
//console.log(xhr)
//console.log('发送前')
},
success: function (data, textStatus, jqXHR) {
if (data != "") {
//source = data;
var dataJson = JSON.stringify(data);
var jsonInfo = JSON.parse(dataJson);
source = jsonInfo;
//当为字体连打的时候，按下空格键触发事件
if(e==32)
{
showUse.innerHTML = '';
var table = null;
var tr = null;
var td = null;
//创建table标签
table = document.createElement('table');
table.id = 'selector';
table.style.width = '100%';
for (var o in source) {
//创建tr标签
tr = document.createElement('tr');
//创建td标签
td = document.createElement('td');
//在td中插入<a href="javascript:void(null);"><span>数据项</span></a>
td.innerHTML = '<a href="javascript:void(null);">' + source[o].BrandName + "," + source[o].BrandId + '</a>';
//appendChild()在指定元素的最后一个子节点后添加节点
tr.appendChild(td);
table.appendChild(tr);
showUse.appendChild(table);
}
}
} else {
data = "";
}
//console.log(data)
//console.log(textStatus)
//console.log(jqXHR)
},
error: function (xhr, textStatus) {
//console.log('错误')
//console.log(xhr)
//console.log(textStatus)
},
complete: function () {
//console.log('结束')
}
})
}
function match(quickExpr, value, source,e) {
var table = null;
var tr = null;
var td = null;
//创建table标签
table = document.createElement('table');
table.id = 'selector';
table.style.width = '100%';
//开始遍历数组
//var arrSource = source;
GetSource(value,e);
for (var o in source) {
//创建tr标签
tr = document.createElement('tr');
//创建td标签
td = document.createElement('td');
//在td中插入<a href="javascript:void(null);"><span>数据项</span></a>
td.innerHTML = '<a href="javascript:void(null);">' + source[o].BrandName + "," + source[o].BrandId + '</a>';
//appendChild()在指定元素的最后一个子节点后添加节点
tr.appendChild(td);
table.appendChild(tr);
showUse.appendChild(table);
}
//检验table下面的a标签的数量，以此确定是否将“提示”列表显示
if (showUse.getElementsByTagName('a').length) {
showUse.style.display = "";
} else {
showUse.style.display = "none";
}
}
function InputKeyUp(event)
{
event = event || window.event;
if(event.keyCode == 32)
{
if (inputUse.value != '') {
//检查文本框的当前值与以前的值是否有变化
var NowInpuValue = inputUse.value;
//如果文本框当前值与之前的值不同，记录当前值，已被下次调用时使用
inputValue = NowInpuValue;
//清除上次调用显示的结果
showUse.innerHTML = '';
if (inputValue != '') {
//定义JS的RegExp对象，查询以inputValue开头的数据
quickExpr = RegExp('^' + inputValue);
//如果数据源不为空，则调用match函数开始匹配数据
//此处如果通过ajax取数据，则适当修改数据源即可
//GetSource(inputValue);
//if (source) {
// match(quickExpr, inputValue, source);
//}
match(quickExpr, inputValue, source,event.keyCode);
}
}
else {
inputValue = inputUse.value;
showUse.innerHTML = '';
showUse.style.display = "none";
}
}
}
function inputKeydown(event) {
//e.keyCode == 13 空格
//兼容IE
event = event || window.event;
//空格键
if(event.keyCode == 32)
{
if (inputUse.value != '') {
//检查文本框的当前值与以前的值是否有变化
var NowInpuValue = inputUse.value;
//如果文本框当前值与之前的值不同，记录当前值，已被下次调用时使用
inputValue = NowInpuValue;
//清除上次调用显示的结果
showUse.innerHTML = '';
if (inputValue != '') {
//定义JS的RegExp对象，查询以inputValue开头的数据
quickExpr = RegExp('^' + inputValue);
//如果数据源不为空，则调用match函数开始匹配数据
//此处如果通过ajax取数据，则适当修改数据源即可
//GetSource(inputValue);
//if (source) {
// match(quickExpr, inputValue, source);
//}
match(quickExpr, inputValue, source,'');
}
}
else {
inputValue = inputUse.value;
showUse.innerHTML = '';
showUse.style.display = "none";
}
}
//如果按了down键
else if (event.keyCode == 40) {
//如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
if (showUse.style.display == "") {
showUse.getElementsByTagName('a')[0].focus();
} else { //如果“提示”列表未显示,则把焦点依旧留在文本框中
inputUse.focus();
}
}
//如果按了up键
else if (event.keyCode == 38) {
//如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
if (showUse.style.display == "") {
showUse.getElementsByTagName('a')[showUse.getElementsByTagName('a').length - 1].focus();
} else { //如果“提示”列表未显示,则把焦点依旧留在文本框中
inputUse.focus();
}
}
//如果按了tab键，此时的情况与“百度首页”的处理情况一样
else if (event.keyCode == 9) {
showUse.innerHTML = '';
showUse.style.display = "none";
}
}
function inputBlur() {
//由于焦点已经离开了文本框，则取消setInterval
clearInterval(this.timer);
//记住当前有焦点的选项
var current = 0;
//当前table下面的a标签的个数
var aArray = showUse.getElementsByTagName('a');
var len = aArray.length - 1;
var select = document.getElementById("selector");
//定义“选项”的onclick事件
var aClick = function () {
//由于“选项”上触发了click事件，this就是指a标签，则把a标签包含的数据赋值给文本框
inputUse.value = this.childNodes[0].data;
//将文本框的当前值更新到记录以前值的变量中
inputValue = inputUse.value;
//由于上面已经选出合适的数据项，则清空table下的内容，并关闭“提示”列表
showUse.innerHTML = '';
showUse.style.display = 'none';
//将焦点移回文本框
inputUse.focus();
};
//定义“选项”的onfocus事件
var aFocus = function () {
for (var i = len; i >= 0; i--) {
//this是a，this.parentNode是td，select.children[i].children[0]是table.tr.td
if (this.parentNode === select.childNodes[i].childNodes[0]) {
//如果是同一个td，则将current的值置为焦点所在位置的值
current = i;
break;
}
}
//添加有焦点的效果
for (var k in elemCSS.focus) {
this.style[k] = elemCSS.focus[k];
}
};
//定义“选项”的onblur事件
var aBlur = function () {
//添加无焦点的效果
for (var k in elemCSS.blur)
this.style[k] = elemCSS.blur[k];
};
//定义“选项”的onKeydown是事件
var aKeydown = function (event) {
//兼容IE
event = event || window.event;
//如果在选择数据项时按了tab键，此时的情况与“百度首页”的处理情况一样
if (event.keyCode === 9) {
showUse.innerHTML = '';
showUse.style.display = 'none';
inputUse.focus();
}
//如果按了down键
else if (event.keyCode == 40) {
//向下移动，准备移动焦点
current++;
//如果当前焦点在最后一个数据项上，用户用按了down键，则循环向上，回到文本框上
if (current > len) {
current = -1;
inputUse.focus();
} else {
select.getElementsByTagName('a')[current].focus();
}
}
//如果按了up键
else if (event.keyCode == 38) {
//向上移动，准备移动焦点
current--;
//如果当前焦点在文本框上，用户用按了up键，则循环向下，回到最后一个数据项上
if (current < 0) {
inputUse.focus();
} else {
select.getElementsByTagName('a')[current].focus();
}
}
};
//将“选项”的事件与相应的处理函数绑定
for (var i = 0; i < aArray.length; i++) {
aArray[i].onclick = aClick;
aArray[i].onfocus = aFocus;
aArray[i].onblur = aBlur;
aArray[i].onkeydown = aKeydown;
}
}
</script>
<div id="bodyDiv" name="bodyDiv" style="position: relative; border-top: 0px; margin-top: 0; width: 160px">
<!--<span style="color:red;font-size:5px;">*补全功能默认开启</span>-->
<input type="text" id="txtlc1" name="txtlc1" value="<%=txtstrlc1 %>" placeholder="品牌名称1" style="height: 30px" onfocus="inputFocus()" onkeydown="inputKeydown(event)" onblur="inputBlur()" onkeyup="InputKeyUp(event)" />
<div id="showUser" name="showUser">
<!-- 此处添加搜索数据的结果，使用的是table标签 -->
</div>
</div>
扫一扫
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
