gpt4 book ai didi

javascript - 以某种方式将自动完成 Div 与条目文本框附加在一起

转载 作者:行者123 更新时间:2023-12-03 05:06:51 25 4
gpt4 key购买 nike

  • IIS 版本:IIS 8.5
    • 服务器:Windows Server 2012 R2
    • 根文件夹:D:\Sites\Default\WWWRoot
    • 网站目录:D:\Sites\Default\WWWRoot\Website
    • 语言:ASP、JavaScript、HTML、AJAX

所以我构建了这个带有搜索框的页面。当您在搜索框中输入名称时,它会使用 ajax 连接到另一个页面,使用搜索条件来查询我们的数据库,并实时返回 div 框中搜索条目的“类似”结果(值得庆幸的是,它的快速返回)。所以我有这个工作。这是我的问题。 Div 本身需要附加到搜索框,因此它的行为就像(由于缺乏更好的示例)Google 的搜索框,当您键入内容时,自动建议的行为就像搜索字段的下拉菜单。我做了一些研究,看起来 HTML5 有一个内置标签可以实现这一点。不幸的是,我没有使用 HTML5。任何帮助,将不胜感激。我想做的就是让 div 在返回结果后就像搜索字段中的“下拉菜单”一样,如果需要,您可以使用键盘滚动浏览。我还附上了它现在的样子的屏幕截图(图像左侧)以及我希望它如何运行的示例(图像右侧)Example

预先感谢您的帮助!

这是 JavaScript/HTML(主页)的代码:

 <script>
var xmlHttp
function showHint(str, box, thisForm, autoSubmit)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support this feature. Please search manually.");
return;
}

var url="gethint.asp";
url=url+"?q="+str;
url=url+"&b="+box;
url=url+"&f="+thisForm;
url=url+"&a="+autoSubmit;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}


function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{

// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}

catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xmlHttp;

}


</script>

<font face="calibri">
<form action="" method="post">
<input type="text" id="txt1" onkeyup="showHint(this.value,'txt1','form1',true)" autocomplete="off" style="width: 250px;"/>
<div id="txtHint"></div>
</form>
</font>

这是它监听查询的页面的代码:

    <!--#include file="Databases.asp"-->
<%

response.expires=-1

Dim rsWords

Dim rsWords_numRows

Dim q

Dim b

Dim hint

q=ucase(request.querystring("q"))

b=(request.querystring("b"))

f=(request.querystring("f"))

a=(request.querystring("a"))

hint=""




Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open = "Provider=SQLOLEDB;Data Source=" & DatabaseServerR & ";Integrated Security=SSPI;Network Library=DBMSSOCN;Initial Catalog=" & Database_R & ";"
Set rsWords = Conn.Execute ("SELECT TOP 20 WKR_FLL_NM, WDW_LGON_ID FROM dbo.HPeepzs With(NoLock) WHERE WKR_FLL_NM LIKE'" + q + "%' OR WDW_LGON_ID LIKE'" + q + "%' OR WKR_ID LIKE'" + q + "%' ORDER BY WKR_FLL_NM ASC")





If Not rsWords.EOF Then

'If entrytype = 1 Then
'Do While Not rsWords.EOF
' If trim(hint) = "" Then
' hint = "<a href=""javascript:setTextBox('" & rsWords("PC_Name") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("PC_Name") & "</a>"
' Else
' hint = hint & "<a href=""javascript:setTextBox('" & rsWords("PC_Name") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("PC_Name") & "</a>"
' End If
' rsWords.MoveNext()
'Loop
'Else
Do While Not rsWords.EOF
If trim(hint) = "" Then
hint = "<li> <a href=""javascript:setTextBox('" & rsWords("WDW_LGON_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("WKR_FLL_NM") & " (" & rsWords("WDW_LGON_ID") & ")</a>"
Else
hint = hint & "<li> <a href=""javascript:setTextBox('" & rsWords("WDW_LGON_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("WKR_FLL_NM") & " (" & rsWords("WDW_LGON_ID") & ") </a>"
End If
rsWords.MoveNext()
Loop
'End If

End If

if trim(hint)="" then

response.write("Unable To Find Your Search")

else

response.write(hint)

end if


rsWords.Close()
Conn.Close

Set rsWords = Nothing
Set Conn = Nothing
%>

最佳答案

所以,我已经知道该怎么做了。我只是将 div 放置在搜索字段下方,它充当弹出下拉列表,当使用边距样式输入搜索时会弹出

<div id="txtHint" style="position:absolute;margin-top:2px;margin-left:0px;z-index: 99 !important;"></div>   

关于javascript - 以某种方式将自动完成 Div 与条目文本框附加在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41981334/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com