社区
JavaScript
帖子详情
50分求---如何对文本框进行联想输入?
tongping
2004-10-15 10:08:19
本来是用列表框选择实现的,但是因为可能列表框中的项过多,不易选择,现欲改为文本框输入。
要求在输入的时候,能够根据已输入的字符,动态提示可能匹配的完整的内容供选择,像自动完成标单一样,或者说像智能输入法一样,不过这里要在web页面上实现。
哪位大虾告知应如何实现?
多谢了。
...全文
208
7
打赏
收藏
50分求---如何对文本框进行联想输入?
本来是用列表框选择实现的,但是因为可能列表框中的项过多,不易选择,现欲改为文本框输入。 要求在输入的时候,能够根据已输入的字符,动态提示可能匹配的完整的内容供选择,像自动完成标单一样,或者说像智能输入法一样,不过这里要在web页面上实现。 哪位大虾告知应如何实现? 多谢了。
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用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也没找到
自做多选下拉框和可
联想
文本框
实现可
联想
文本框
的核心是实时查询和匹配算法,可以基于用户
输入
的前缀、关键词或者其他规则
进行
匹配。通常,这需要结合后端服务实时通信,以获取最新的匹配结果。前端则负责展示这些结果,一般采用下拉列表的形式,...
uniapp模仿下拉框实现文字
联想
功能 - uniapp
输入
联想
(官方样式-附源码)
一般是个
输入
框,
输入
关键词,下拉一个搜索列表。 ``ElementUI``有提供``<el-autocomplete>``,但uniapp官网没提供这么细,特简单扩展了一下: ## 三、参数说明: |名称| 类型 | 说明 | |--|--|:--| | type | int | ...
jQuery
文本框
自动
联想
补全特效.zip
6. **调整样式**:根据设计要求,可能需要对提示列表的样式
进行
定制,使其与页面整体风格保持一致。 总结,jQuery
文本框
自动
联想
补全特效是一个高效且灵活的解决方案,能够提升用户
输入
体验。通过理解其工作原理和...
文本框
联想
查询
文本框
联想
查询是一种常见的用户界面交互技术,广泛应用于搜索引擎、智能助手、网站表单等场景。它通过在用户
输入
文本时动态提供相关建议,提高了用户的
输入
效率和用户体验。这种技术通常被称为自动补全或自动提示。...
易语言-
文本框
联想
实践
在IT行业中,
文本框
联想
是一种常见的用户界面特性,它极大地提升了用户
输入
的效率和体验。在本主题"易语言-
文本框
联想
实践"中,我们将深入探讨如何利用易语言实现这样的功能,特别是在网络相关的源码上下文中。...
JavaScript
87,997
社区成员
224,708
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章