Question

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

所以我构建了这个有搜索框的页面。当您在搜索框中输入名称时，它使用ajax连接到另一个页面，使用搜索条件查询我们的数据库，并在div框中实时返回“喜欢”搜索条目的结果（谢天谢地，快速回归）。所以我有这个工作。这是我的问题。 Div本身需要附加到搜索框中，因此，由于缺少一个更好的示例，谷歌的搜索框就像你输入的东西一样，自动建议就像搜索字段的下拉列表一样。我做了一些研究，看起来HTML5有一个内置的标签，允许这样做。不幸的是，我没有使用HTML5。任何帮助，将不胜感激。我想要做的就是让div在返回结果后从搜索字段中显示为“下拉列表”，如果需要，可以使用键盘滚动。我还附上了它现在看起来的截图（图像的左侧）以及我希望它如何运作的示例（图像的右侧）

提前感谢您的帮助！

以下是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
%>

Answer 1

所以，我已经弄明白该怎么做了。我只是把div放在搜索字段下面，它就像一个弹出式下拉列表，在使用边距样式输入搜索时会弹出

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

但是，我现在有另一个问题。它允许我使用鼠标光标从自动完成列表中进行选择，但是我无法使用键盘向上和向下箭头滚动列表。我试过这个：

<script>


var UP = 38;
var DOWN = 40;
var ENTER = 13;

var getKey = function(e) {
  if(window.event) { return e.keyCode; }  // IE
  else if(e.which) { return e.which; }    // Netscape/Firefox/Opera
};


var keynum = getKey(e);

if(keynum === UP) {
  //Move selection up
}

if(keynum === DOWN) {
  //Move selection down
}

if(keynum === ENTER) {
  //Act on current selection
}



</script>

为div分配getKey（e）函数但没有骰子。有什么建议？感谢。

以某种方式将Autocomplete Div与条目文本框相关联

1 个答案: