document.getElementById([id]).value 返回一个空字符串

Question

我正在尝试让一个基本的搜索功能在一个显示在模式中的列表上工作。

当我在输入框中输入内容时，下面的javascript函数中的input.value由于某种原因是一个空字符串。结果，javascript 搜索/过滤功能什么都不做。

感谢您的帮助。

VB（生成 HTML）：

<WebMethod()>
    Public Function GetIionsList(schedTypeUID As Integer) As String
        
        Dim table As String = ""
        Dim sql As String = ""
        Dim inspListHTML As New StringBuilder

        Dim dif As DataInterfaceFactory = GetSettingsDIF()

        Dim UserInfo As New NAMEGenericCls.UserCls.NAMEUser
        Dim userName As String = GetUserName(dif)
        UserInfo.Initialise(userName, dif)
        Dim SchedDataRight As New NAMEGenericCls.SecDataRights
        SchedDataRight.LoadDataRights(dif, UserInfo.UID, UserInfo.GroupUID)

        Select Case schedTypeUID
            Case SchedType.PLANNED
                table = "TABLE_ONE"
            Case SchedType.ADHOC
                table = "TABLE_TWO"
            Case SchedType.EXISTING
                table = "TABLE_THREE"
        End Select

        sql = SchedDataRight.CheckDataRights(dif, "SELECT I_UID FROM " & table)

        inspListHTML.Append("<input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'>").AppendLine()
        inspListHTML.Append("<br>").AppendLine()
        inspListHTML.Append("<br>").AppendLine()
        inspListHTML.Append("<ul id='ISelectListUL' class='list-group'>").AppendLine()

        Using dr As New DataReader(dif)
            dr.ExecuteReader(sql)

            Dim PreviousIUID As String = ""
            Dim CurrentIUID As String = ""

            While dr.Read()
                If Not IsDBNull(dr!I_UID) Then
                    CurrentIUID = dr!I_UID

                    If CurrentIUID <> PreviousIUID Then
                        PreviousIUID = CurrentIUID
                        Using drlkp As New DataReader(dif)

                            Dim qp As New List(Of Sqlclient.SqlParameter)
                            qp.Add(New SqlClient.SqlParameter("@CurrentIUID", CurrentIUID))

                            Dim lkp As String = SchedDataRight.CheckDataRights(dif, "SELECT I_NAME FROM TABLE_TWO WHERE I_UID = @CurrentIUID ")
                            drlkp.ExecuteReader(lkp, qp)

                            If Not IsDBNull(lkp) Then
                                getInspListHTML(inspListHTML, dr!I_UID, drlkp!I_NAME, schedTypeUID)
                            End If
                        End Using

                    End If
                Else
                    getInspListHTML(inspListHTML, 999, "Error - No Iions Found", "")
                End If

            End While
        End Using

        inspListHTML.Append("</ul>").AppendLine()

        Return inspListHTML.ToString()


    End Function

呈现的 HTML：

<input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'>
<br>
<br>
<ul id='ISelectListUL' class='list-group'>
<li><a id='li_InspID_117' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>1 Monthly - Safety Iion                     </a></li>
<li><a id='li_InspID_118' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x1 and 2 Monthly - Safety Iion              </a></li>
<li><a id='li_InspID_119' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>Full Sector - Safety Iion                   </a></li>
<li><a id='li_InspID_120' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x2 Monthly - Safety Iion                    </a></li>
<li><a id='li_InspID_121' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x4 Monthly - Safety Iion                    </a></li>
<li><a id='li_InspID_122' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xHigh Traffic - Safety Iion                 </a></li>
<li><a id='li_InspID_123' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xHigh &amp; Med Traffic - Safety Iion           </a></li>
<li><a id='li_InspID_124' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xMed Traffic - Safety Iion                  </a></li>
<li><a id='li_InspID_125' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xLow Traffic - Safety Iion                  </a></li>
<li><a id='li_InspID_126' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
<li><a id='li_InspID_127' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
<li><a id='li_InspID_128' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
<li><a id='li_InspID_129' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>3 Monthly - Safety Iion                     </a></li>
<li><a id='li_InspID_130' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>6 Monthly - Safety Iion                     </a></li>
<li><a id='li_InspID_131' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>1 and  3 Monthly - Safety Iion              </a></li>
<li><a id='li_InspID_132' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>Adhoc                                             </a></li>
</ul>

渲染的 HTML 使用以下命令显示：

$('#IionList').html(inspListHTML);

JS：

function IionSearch() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("textInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("ISelectListUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    };

function IionSearch() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("textInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("ISelectListUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
};

<input type='text' id='textInput' onkeyup='IionSearch()' placeholder='Search..' title='Type in a word'>
<br>
<br>
<ul id='ISelectListUL' class='list-group'>
  <li><a id='li_InspID_117' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>1 Monthly - Safety Iion                     </a></li>
  <li><a id='li_InspID_118' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x1 and 2 Monthly - Safety Iion              </a></li>
  <li><a id='li_InspID_119' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>Full Sector - Safety Iion                   </a></li>
  <li><a id='li_InspID_120' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x2 Monthly - Safety Iion                    </a></li>
  <li><a id='li_InspID_121' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>x4 Monthly - Safety Iion                    </a></li>
  <li><a id='li_InspID_122' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xHigh Traffic - Safety Iion                 </a></li>
  <li><a id='li_InspID_123' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xHigh &amp; Med Traffic - Safety Iion           </a></li>
  <li><a id='li_InspID_124' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xMed Traffic - Safety Iion                  </a></li>
  <li><a id='li_InspID_125' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xLow Traffic - Safety Iion                  </a></li>
  <li><a id='li_InspID_126' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
  <li><a id='li_InspID_127' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
  <li><a id='li_InspID_128' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Iion           </a></li>
  <li><a id='li_InspID_129' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>3 Monthly - Safety Iion                     </a></li>
  <li><a id='li_InspID_130' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>6 Monthly - Safety Iion                     </a></li>
  <li><a id='li_InspID_131' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>1 and  3 Monthly - Safety Iion              </a></li>
  <li><a id='li_InspID_132' onclick="javascript:selectIion(this.id,'1');" class='list-group-item'>Adhoc                                             </a></li>
</ul>

Answer 1

这一行之后

 inspListHTML.Append("</ul>").AppendLine()

添加这个：

inspListHTML.AppendLine("<script type='text/javascript'>  (function test() { document.getElementById('textInput').addEventListener('keyup', function execute() { InspectionSearch(); }) })();</script>")