如何解决document.getElementById[id]value返回一个空字符串
我正在尝试使用基本搜索功能来处理在模式内显示的列表。
当我在输入框中键入内容时,出于某些原因,下面的javascript函数中的input.value
是空字符串。结果,javascript搜索/过滤器功能无法执行任何操作。
感谢您的帮助。
VB(生成HTML):
<WebMethod()>
Public Function GetInspectionsList(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 WDMGenericCls.UserCls.WDMUser
Dim userName As String = GetUserName(dif)
UserInfo.Initialise(userName,dif)
Dim SchedDataRight As New WDMGenericCls.SecDataRights
SchedDataRight.LoadDataRights(dif,UserInfo.UID,UserInfo.GroupUID)
Select Case schedTypeUID
Case SchedType.PLANNED
table = "RM_INSPECT_BY_ROUTE"
Case SchedType.ADHOC
table = "RM_INSPECT"
Case SchedType.EXISTING
table = "RM_SCHEDULED_INSPECTION"
End Select
sql = SchedDataRight.CheckDataRights(dif,"SELECT INSPECT_UID FROM " & table)
inspListHTML.Append("<input type='text' id='textInput' onkeyup='InspectionSearch()' placeholder='Search..' title='Type in a word'>").AppendLine()
inspListHTML.Append("<br>").AppendLine()
inspListHTML.Append("<br>").AppendLine()
inspListHTML.Append("<ul id='inspectSelectListUL' class='list-group'>").AppendLine()
Using dr As New DataReader(dif)
dr.ExecuteReader(sql)
Dim PreviousInspectUID As String = ""
Dim CurrentInspectUID As String = ""
While dr.Read()
If Not IsDBNull(dr!INSPECT_UID) Then
CurrentInspectUID = dr!INSPECT_UID
If CurrentInspectUID <> PreviousInspectUID Then
PreviousInspectUID = CurrentInspectUID
Using drlkp As New DataReader(dif)
Dim qp As New List(Of Sqlclient.SqlParameter)
qp.Add(New SqlClient.SqlParameter("@CurrentInspectUID",CurrentInspectUID))
Dim lkp As String = SchedDataRight.CheckDataRights(dif,"SELECT INSPECT_NAME FROM RM_INSPECT WHERE INSPECT_UID = @CurrentInspectUID ")
drlkp.ExecuteReader(lkp,qp)
If Not IsDBNull(lkp) Then
getInspListHTML(inspListHTML,dr!INSPECT_UID,drlkp!INSPECT_NAME,schedTypeUID)
End If
End Using
End If
Else
getInspListHTML(inspListHTML,999,"Error - No Inspections Found","")
End If
End While
End Using
inspListHTML.Append("</ul>").AppendLine()
Return inspListHTML.ToString()
End Function
渲染的HTML:
<input type='text' id='textInput' onkeyup='InspectionSearch()' placeholder='Search..' title='Type in a word'>
<br>
<br>
<ul id='inspectSelectListUL' class='list-group'>
<li><a id='li_InspID_117' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>1 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_118' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x1 and 2 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_119' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_120' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x2 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_121' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x4 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_122' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xHigh Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_123' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xHigh & Med Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_124' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xMed Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_125' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xLow Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_126' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_127' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_128' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_129' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>3 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_130' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>6 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_131' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>1 and 3 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_132' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>Adhoc </a></li>
</ul>
使用以下命令显示渲染的HTML:
$('#inspectionList').html(inspListHTML);
JS:
function InspectionSearch() {
var input,filter,ul,li,a,i,txtValue;
input = document.getElementById("textInput");
filter = input.value.toUpperCase();
ul = document.getElementById("inspectSelectListUL");
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 InspectionSearch() {
var input,txtValue;
input = document.getElementById("textInput");
filter = input.value.toUpperCase();
ul = document.getElementById("inspectSelectListUL");
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='InspectionSearch()' placeholder='Search..' title='Type in a word'>
<br>
<br>
<ul id='inspectSelectListUL' class='list-group'>
<li><a id='li_InspID_117' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>1 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_118' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x1 and 2 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_119' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_120' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x2 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_121' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>x4 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_122' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xHigh Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_123' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xHigh & Med Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_124' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xMed Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_125' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xLow Traffic - Safety Inspection </a></li>
<li><a id='li_InspID_126' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_127' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_128' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>xPeriod Full Sector - Safety Inspection </a></li>
<li><a id='li_InspID_129' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>3 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_130' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>6 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_131' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>1 and 3 Monthly - Safety Inspection </a></li>
<li><a id='li_InspID_132' onclick="javascript:selectInspection(this.id,'1');" class='list-group-item'>Adhoc </a></li>
</ul>
解决方法
此行之后
inspListHTML.Append("</ul>").AppendLine()
添加此内容:
inspListHTML.AppendLine("<script type='text/javascript'> (function test() { document.getElementById('textInput').addEventListener('keyup',function execute() { InspectionSearch(); }) })();</script>")
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。