社区
JavaScript
帖子详情
50分求---如何对文本框进行联想输入?
tongping
2004-10-15 10:08:19
本来是用列表框选择实现的,但是因为可能列表框中的项过多,不易选择,现欲改为文本框输入。
要求在输入的时候,能够根据已输入的字符,动态提示可能匹配的完整的内容供选择,像自动完成标单一样,或者说像智能输入法一样,不过这里要在web页面上实现。
哪位大虾告知应如何实现?
多谢了。
...全文
200
7
打赏
收藏
50分求---如何对文本框进行联想输入?
本来是用列表框选择实现的,但是因为可能列表框中的项过多,不易选择,现欲改为文本框输入。 要求在输入的时候,能够根据已输入的字符,动态提示可能匹配的完整的内容供选择,像自动完成标单一样,或者说像智能输入法一样,不过这里要在web页面上实现。 哪位大虾告知应如何实现? 多谢了。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
tongping
2004-10-22
打赏
举报
回复
多谢了BILLSJONE(BILL_JONE) 。
可能用层来实现更切合需要些 呵呵 :)
ouyld
2004-10-16
打赏
举报
回复
学习
libra_king
2004-10-16
打赏
举报
回复
.htc没见过, 关注ing
BILLSJONE
2004-10-16
打赏
举报
回复
上面index.htm有個地方少了<號
<?IMPORT NAMESPACE="AXTeam" IMPLEMENTATION="ComboBox.htc" />
BILLSJONE
2004-10-16
打赏
举报
回复
//////////////////
index.htm
/////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 类似于ie地址栏的下拉列表:回车提交,动态提示</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY bgcolor="menu">
类似于ie地址栏的下拉列表:回车提交,动态提示
<?XML:NAMESPACE PREFIX="AXTeam" />
?IMPORT NAMESPACE="AXTeam" IMPLEMENTATION="ComboBox.htc" />
<AXTeam:ComboBox id="ComboBox1" width='200'>
<AXTeam:option>http://www.51js.com</AXTeam:option>
<AXTeam:option>http://www.51.net</AXTeam:option>
<AXTeam:option>http://csdn.net</AXTeam:option>
<AXTeam:option>ftp://asp.6to23.com</AXTeam:option>
<AXTeam:option>file://C:</AXTeam:option>
<AXTeam:option>C:\winnt</AXTeam:option>
</AXTeam:ComboBox>
</BODY>
</HTML>
BILLSJONE
2004-10-16
打赏
举报
回复
我收葳有一個,兩個文件ComboBox.htc和index.htm運行index.htm就可以了:
////////////////
ComboBox.htc
///////////////
//作者:宝玉
//Mail:junminliu@msn.com
//描述:宝贝即时寻呼
//日期:2003-01-16
<public:component tagname="ComboBox" literalcontent="true">
<public:method name="CreateComboBox" internalname="f_PublicCreateComboBox" />
<public:method name="CreateComboBoxIpt" internalname="f_PublicCreateComboBoxIpt" />
<public:method name="CreateDropDown" internalname="f_PublicCreateDropDown" />
<public:method name="CreateDropList" internalname="f_PublicCreateDropList" />
<public:method name="CreatePopup" internalname="f_PublicCreatePopup" />
<public:attach event="oncontentready" onevent="f_CreateComboBox()" />
<SCRIPT LANGUAGE="JScript">
var oPopup = null;
var ComboBox = null;
var ComboBoxIpt = null;
var DropDown = null;
var DropList = null;
var aNodes = new Array();
function f_CreateComboBox()
{
aNodes = f_CreateNodes(element.innerHTML);
DropList = f_PublicCreateDropList();
f_PublicCreateDropListData(aNodes);
ComboBox = f_PublicCreateComboBox();
ComboBoxIpt = f_PublicCreateComboBoxIpt();
DropDown = f_PublicCreateDropDown();
oPopup = f_PublicCreatePopup()
ComboBox.attachEvent("onmouseover",fnMouseover);
ComboBox.attachEvent("onmouseout",fnMouseout);
DropDown.attachEvent("onmousedown",fnMousedown);
ComboBoxIpt.attachEvent("onfocus",ComboBoxFocus);
ComboBoxIpt.attachEvent("onblur",ComboBoxBlur);
ComboBoxIpt.attachEvent("onkeyup",ComboBoxKeyup);
window.document.attachEvent("onclick", chkstat);
}
function f_PublicCreateComboBox()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 1;
oTable.cellPadding = 0;
oTable.id = "AXTeamComboBox"+uniqueID;
oTable.style.display = "inline";
oTable.border = 0;
oTable.bgColor = "#FFFFFF";
element.insertAdjacentElement("BeforeBegin",oTable);
oTable.ComboBoxFocus = false;
return oTable;
}
function f_PublicCreateComboBoxIpt()
{
var oInput = window.document.createElement("INPUT");
oInput.type = "text";
oInput.style.border = 0;
oInput.style.width = element.width;
oInput.style.height = 15;
oInput.id = "AXTeamComboBoxIpt"+uniqueID;
ComboBox.insertRow().insertCell().appendChild(oInput);
ComboBox.rows[0].bgColor = "#FFFFFF";
return oInput;
}
function f_PublicCreateDropDown()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 0;
oTable.cellPadding = 0;
oTable.id = "AXTeamDropDown"+uniqueID;
oTable.border = 0;
oTable.bgColor="#DBD8D1";
oTable.style.cssText = "display:inline;cursor:default;";
oTable.attachEvent("onselectstart", fnCancel);
var otd = oTable.insertRow().insertCell();
otd.style.cssText = "font-family: webdings;font-size:8px;text-align: center;width:13px;height:17px;";
otd.innerText = "6";
ComboBox.rows[0].insertCell().appendChild(oTable);
return oTable;
}
function f_PublicCreateDropList()
{
var oTable = window.document.createElement("TABLE");
oTable.cellSpacing = 1;
oTable.cellPadding = 0;
oTable.border = 0;
oTable.bgColor="#FFFFFF";
oTable.style.cssText = "font-size:9pt;cursor:default;border:1px solid #666666;";
oTable.attachEvent("onselectstart", fnCancel);
return oTable;
}
function f_PublicCreateDropListData(aNodes,redata)
{
if(!redata)
var re=new RegExp("^");
else
var re=new RegExp("^"+redata,"i");
var otd = null;
var No=DropList.rows.length;
for(i=0;i<No;i++)DropList.deleteRow();
for(var i=0;i<aNodes.length;i++)
{
if(re.test(aNodes[i])==true)
{
otd = DropList.insertRow().insertCell();
otd.style.height = "12px";
otd.innerHTML = aNodes[i];
otd.attachEvent("onmouseover",DropListOver);
otd.attachEvent("onmouseout",DropListOut);
otd.attachEvent("onclick",DropListClick);
}
}
}
function f_PublicCreatePopup()
{
var oSpan = element.document.createElement("span");
oSpan.style.cssText = " position:absolute;display:none;cursor:default;z-index:100;";
window.document.body.appendChild(oSpan);
return oSpan;
}
function f_CreateNodes(htmlText)
{
var oSpan = element.document.createElement("span");
oSpan.innerHTML = htmlText;
var xNodes = oSpan.childNodes;
var Nodes = new Array();
var nNumNodes = (xNodes == null) ? 0 : xNodes.length;
for (var nIndex = 0; nIndex < nNumNodes; nIndex++)
{
var node = xNodes[nIndex];
if (node != null)
Nodes = Nodes.concat(f_CreateDropListItems(node));
}
return Nodes;
}
function f_CreateDropListItems(oNode)
{
var rNodes;
var szTagName = (oNode.tagName == null) ? "" : oNode.tagName.toLowerCase();
if(szTagName == "option")
{
var szText = oNode.innerText;
rNodes = new Array(szText);
}
else
rNodes = new Array();
return rNodes;
}
function fnMouseover()
{
if(ComboBox.ComboBoxFocus) return;
overstat();
}
function fnMouseout()
{
if(ComboBox.ComboBoxFocus) return;
defaultstat();
}
function fnMousedown()
{
if(event.srcElement != ComboBoxIpt)
{
if(oPopup.style.display == '')
{
oPopup.style.display = 'none';
DropDown.style.color = "#000000";
return;
}
f_PublicCreateDropListData(aNodes)
ComboBoxIpt.select();
DropDown.style.color = "#FFFFFF";
}
oPopup.appendChild(DropList);
oPopup.style.width = (oPopup.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : oPopup.offsetWidth;
oPopup.style.left = getx(ComboBox);
oPopup.style.top = gety(ComboBox)+19;
oPopup.style.display = '';
oPopup.children[0].width = "100%";
ComboBox.ComboBoxFocus = true;
}
function overstat()
{
ComboBox.bgColor="#0A246A";
DropDown.bgColor="#B6BDD2";
DropDown.style.color = "#000000";
}
function defaultstat()
{
ComboBox.bgColor="#FFFFF";
DropDown.bgColor="#DBD8D1";
DropDown.style.color = "#000000";
}
function DropListOver()
{
obj = event.srcElement;
obj.bgColor='highlight';obj.style.color='#FFFFFF';obj.style.cursor='default';
}
function DropListOut()
{
obj = event.srcElement;
obj.bgColor='#FFFFFF';obj.style.color='#000000';
}
function DropListClick()
{
obj = event.srcElement;
ComboBoxIpt.value = obj.innerText;
oPopup.style.display = "none";
ComboBoxIpt.select();
DropDown.style.color = '#000000';
}
function ComboBoxFocus()
{
if(ComboBox.ComboBoxFocus) return;
ComboBox.ComboBoxFocus = true;
overstat();
}
function ComboBoxBlur()
{
if(ComboBox.ComboBoxFocus) return;
defaultstat();
}
function ComboBoxKeyup()
{
f_PublicCreateDropListData(aNodes,ComboBoxIpt.value);
fnMousedown();
addOption();
}
function addOption(){
if(event.keyCode==13)
{
aNodes[aNodes.length] = ComboBoxIpt.value;
}
}
function chkstat()
{
var oEl = event.srcElement;
while( null != oEl && oEl != ComboBox)
{
oEl = oEl.parentElement;
}
if(oEl == null)
{
defaultstat();
ComboBox.ComboBoxFocus = false;
oPopup.style.display = "none";
}
}
function fnCancel()
{
return false;
}
function getx(e)
{
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function gety(e)
{
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</SCRIPT>
是是非非
2004-10-16
打赏
举报
回复
在哪儿看到过…………
想不起来了
google也没找到
自做多选下拉框和可
联想
文本框
自做多选下拉框和可
联想
文本框
此资源用到COMPONENTONE组件. 请下载并安装
jQuery
文本框
联想
补全自动完成插件
一款简单使用的jQuery
文本框
联想
补全自动完成插件,可定义索引关键词,可设置
输入
框的宽高,支持搜索回调函数的jQuery搜索框
输入
关键词自动
联想
补全代码。
Flutter 从入门实践到开发一个APP之UI基础篇
本课程详细讲解 Flutter 中涉及到的视图组件,通过这门课程的学习使得大家能掌握使用 Flutter 来编写跨平台移动客户端应用中的基本布局视图。 本课程涉及到: * flutter 中 MaterialApp 使用精讲 * flutter 中 ...
jQuery
文本框
自动
联想
补全特效(边
输入
边搜索)
jQuery
文本框
自动
联想
补全特效(边
输入
边搜索) :$(document).ready(function(){ $('#search-form').autocomplete({ hints: proposals, width: 300, height: 30, onSubmit: function(text){ $('#message'...
易语言-
文本框
联想
实践
源码功能,
输入
之文字或者首字母之后,对已有站点
进行
联想
。用的精益模块9.2。
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章