wo13145219
- 浏览: 216054 次
- 性别:
- 来自: 江西
-
文章分类
- 全部博客 (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>
分享到：
发表评论
相关推荐
1. **JavaScript自动完成**：JavaScript库如jQuery UI、Typeahead.js或Autocomplete.js提供了实现自动完成的基础。这些库通常包括一个输入框监听器，当用户输入时触发请求，并显示返回的建议列表。 2. **PHP接口...
`44444.html`可能是示例页面，`jquery-1.3.2.js`是jQuery库的旧版本，而`bb.js`可能是包含自动完成逻辑的JavaScript脚本。 综上所述，利用jQuery实现自动完成功能，主要涉及到Ajax通信、CSS布局以及jQuery的事件...
实现JS自动完成功能，我们可以利用jQuery库，这是一个轻量级、高性能的JavaScript库，提供了许多方便的DOM操作和事件处理方法。jQuery使得在不同浏览器间编写兼容的代码变得更加容易。 在JS中实现中文拼音自动完成...
本文将深入探讨标题所提及的"一个超级小的JavaScript自动完成自动建议库"，以及与JavaScript相关的知识点。 标题中的“零依赖800字节的mingzip.zip”可能指的是一个极小型的JavaScript库，专门用于实现自动完成和...
react-native-autocomplete-input, 纯javascript自动完成输入，用于响应本机 react-native-autocomplete-input 一个纯JS自动完成组件，用于响应本机。 在你自己的项目中使用这里组件，或者将它的用作生成你自己的...
最近又花了点时间写了个在一般项目中比较常用的插件，就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据，支持能过配置的自定义处观位置与大小的调整；自定义事件触发；自定义请求...
面向对象的纯js仿百度自动完成，可以在一个页面内通过创建对象使用多个
通过以上技术，我们可以实现一个功能完善的JavaScript自动完成组件。具体实现过程通常包括创建输入事件监听器，获取输入值，匹配数据源，创建并插入DOM元素，以及处理用户与下拉列表的交互。在实际项目中，可以使用...
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb。 标签：AutoJS
在JavaScript的世界里，开发人员经常面临为用户输入提供智能提示或自动补全功能的需求，而 Awesomplete 就是一个非常出色的解决方案。这款轻量级的 autocomplete 插件以其高效和灵活的特性赢得了开发者们的喜爱。...
【自动完成 JS】技术是前端开发中的重要组成部分，主要用于提高用户输入效率和用户体验。它广泛应用于搜索框、表单输入、代码编辑器等场景，通过预测和建议用户可能要输入的内容，大大减少了用户手动键入的步骤。在...
"EDITPLUS 自动完成JS插件"是专门为EDITPLUS设计的一个增强工具，用于提升JavaScript开发时的代码编写效率。 该插件的核心特性是自动完成功能，它可以在用户输入代码时提供智能提示，根据上下文显示可能的函数、...
【描述】中的"js自动完成"，指的是利用JavaScript编程语言实现自动补全功能。"struct1.2+mysql"表明项目中可能使用了Structs 1.2框架和MySQL数据库来处理数据存储和检索。Structs是一个基于MVC模式的Java Web开发...
在JavaScript编程中，"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能，使得能够自动为带有特定前缀（例如"0X"）的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...
在“js自动完成城市提示输入”中，核心是监听用户的输入事件，每当用户在输入框中输入字符时，都会触发一个事件。我们可以捕获这个事件，并利用拼音库将用户输入的汉字转换为拼音。然后，我们可以在预先存储的城市...
【JS 自动完成 AutoComplete(Ajax 查询)】是前端开发中常见的一种功能，它通过实时获取用户在输入框中输入的字符，利用Ajax技术向服务器发送请求，动态加载并显示匹配的数据，为用户提供便捷的搜索体验。这个功能在...
《Atom编辑器中的Three.js自动完成插件：atom-autocomplete-threejs详解》 在现代Web开发中，JavaScript库和框架的使用越来越广泛，其中Three.js是3D网页开发的首选库之一。为了提高开发效率，许多开发者依赖于代码...
总的来说，EDITPLUS的自动完成插件（JS含jQuery API）是一个高效且实用的工具，它能够帮助开发者快速编写JavaScript和jQuery代码，提高开发速度和代码质量。无论是初学者还是经验丰富的专业人士，都能从中受益。通过...
标题“自动完成JS”指的是在JavaScript中实现自动补全或自动建议的功能，这通常用于提升用户在输入框中输入内容时的效率和体验。在Web开发中，这种功能广泛应用于搜索框、表单填写等场景，它能预测并提供用户可能想...