wo13145219
- 浏览: 209375 次
- 性别:
- 来自: 江西
-
文章分类
- 全部博客 (109)
- C# (29)
- ASP.NET (30)
- MSSQL (29)
- javascript (9)
- cmd (3)
- ORACLE (4)
- log4j (1)
- window (5)
- FTP (1)
- Shell (1)
- java (1)
- IIS (7)
- html (11)
- SQL (3)
- Jquery (11)
- IE (3)
- 火狐、谷歌 (2)
- wince (2)
- JSON (5)
- List (1)
- Foreach (1)
- SQLhelper (1)
- Ajax (1)
- Firebird (1)
- mysql (7)
- js (2)
- jQuery.autocomplete (1)
- dataTable (1)
- Http (1)
- get (1)
- datetime (1)
- powshell (1)
- URL Protocol (1)
- Office (1)
- Excel (1)
- ASP.NET，算法，秘钥 (1)
- 浏览器 (1)
- Tomcat (1)
最新评论
js自动完成
<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>
分享到：
发表评论
相关推荐
react-native-autocomplete-input, 纯javascript自动完成输入，用于响应本机 react-native-autocomplete-input 一个纯JS自动完成组件，用于响应本机。 在你自己的项目中使用这里组件，或者将它的用作生成你自己的...
JS自动完成，支持中文拼音，不支持多音字。
最近又花了点时间写了个在一般项目中比较常用的插件，就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据，支持能过配置的自定义处观位置与大小的调整；自定义事件触发；自定义请求...
Awesomplete是一款实用的轻量级js自动完成autocomplete插件。该autocomplete插件的特点有：轻量级、高度可定制、简单易用、无外部依赖等。
面向对象的纯js仿百度自动完成，可以在一个页面内通过创建对象使用多个
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb。 标签：AutoJS
支持PHP接口,调用比较简单,稍微修改可在一个页面上支持多个输入框的自动完成.
使用JQuery做的自动完成, 主要使用了Ajax、CSS的绝对定位、代码量也不大
EDITPLUS 自动完成JavaScript插件
用于React Native的纯JS自动完成组件。 在您自己的项目中使用此组件，或将其用作启发来构建自己的自动完成功能。 如何使用react-native-autocomplete-input 用RN> = 0.26.2测试。 如果要使用RN <0.26，请尝试...
使用JavaScript 完成表单的自动计算
自动完成 使用 node.js 自动完成
js自动完成,struct1.2+mysql,有完整的代码和建表脚本
EDITPLUS 自动完成插件 （JS 含jQuery API）
js自动完成城市提示输入，可进行拼音的简写，汉字输入
自动完成============== 原生 javascript 自动完成进入示例：将代码放在 <body> 的末尾 [removed][removed][removed] Autocomplete([Dom Element], [CALLBACK]); [removed]它适用于 chrome(lastest)、firefox...
所谓的提升用户体验，其实就是把所有用户视为极度弱智和超级懒鬼。比如JavaScript自动完成(Autocomplete)脚本, 常用于表单，用户只需输入一两个字母，就为你扩展、联想、匹配和供君选择。
它提供了更好的JavaScript自动完成功能，还提供了许多有关创建，开发和管理，例如： Cordova项目（直接从Sublime Text运行，运行，模拟，构建，编译，服务等）！ Ionic v1和v2（还包括v3）项目（与Cordova项目...
javascript 仿照google自动完成效果，关键词完全可以动态