Suche nach Übereinstimmungen in Datalist mit JavaScript

Question

Zuerst bin ich in C# arbeiten, in ASP.NET, habe ich ein Datalist mit den Mitarbeitern, und die Namen sind in Labels, in eine ItemTemplate.

Dann brauche ich eine JavaSript funtion, die den Text durch den Benutzer eingegeben fangen und vergleichen ihn mit dem Text des Labels. Wenn Sie einen Zufall haben, zeigen Sie die Zeile, sonst verstecken Sie sie.

<asp:DataList ID="dt_usuario" runat="server" CellPadding="4" OnItemCommand="dt_usuario_ItemCommand" 
 
        ForeColor="#333333" BorderColor="Black" BorderStyle="Dashed" BorderWidth="1px" ItemStyle-BorderColor="Gray" ItemStyle-BorderStyle="Dashed" ItemStyle-BorderWidth="1px"> 
 
        <AlternatingItemStyle BackColor="White" /> 
 
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
 
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
 
        <ItemStyle BackColor="#EFF3FB" /> 
 
         <ItemTemplate> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             <asp:Label ID="lblid" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "id_usuario")%>'></asp:Label> 
 
            </td> 
 
            <td style="width:450px;" title="emploee"> 
 
             <asp:Label ID="lbl" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "nom_institucion") %>'></asp:Label> 
 
            </td> 
 
            <td> 
 
             <asp:LinkButton ID="lkreport" runat="server" Text="Reporte" CommandName="Reporte" class="btn btn-7 btn-7ba icon-reporte"><span><center>Imprimir</center></span></asp:LinkButton> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </ItemTemplate> 
 
        </asp:DataList>

<asp:TextBox ID="txtSeach" Width="400px" onkeyup="javascript:Seach(this)" runat="server"></asp:TextBox>

Ich habe versucht, bin meine eigene funtion zu schaffen, aber hat nicht funktioniert

function Seach(phrase) 
 
     { 
 
      var palabra = phrase.value.toLowerCase().split(" "); 
 
      var datalist = document.getElementById('<%=dt_usuario.ClientID%>'); 
 
      for (var i = 0; i < datalist.length; i++) 
 
      { 
 
       var usuario = datalist.rows[i].getElementById("lblUsuario").value; 
 
       var institucion = datalist.rows[i].getElementById("lblInstitucion").value; 
 
       if (usuario.match(/palabra.*/) || institucion.match(/palabra.*/)) 
 
       { 
 
        datalist.rows[i].visible = false; 
 
       } 
 
      } 
 
      
 
     } 
 
    </script>

Ich hoffe, jemand mir

Answer 1

Hier ein paar adjustements sind, die Sie Ihren Code machen:

1. Da die Tabellenzeilen don‘ t unterstützen die getElementById Methode, die getElementsByClassName Methode kann stattdessen verwendet werden. Den Labels, auf die die Suche abzielt, kann ein gemeinsamer Klassenname zugewiesen werden, sodass sie mit einem einzigen Aufruf abgerufen werden können.
2. Die Etiketten werden als span Elemente gerendert, ihr Inhalt wird durch die innerHTML Eigenschaft statt value angegeben.
3. Der display Stil kann verwendet werden, um die Zeilen ein-/auszublenden, statt der visible Eigenschaft (die nicht existiert).
4. Sie beziehen sich auf Labels mit IDs lblUsuario und lblInstitucion in Ihrer Funktion, aber ich sehe sie nicht in Ihrem Markup. Ich nehme an, dass sie verloren gegangen sind, als Sie Ihren Code in die Frage kopiert/eingefügt haben.

Typischer Markup für die Labels in der Datalist:

<asp:Label ID="lblUsuario" runat="server" CssClass="fieldValue" Text='<%# DataBinder.Eval(Container.DataItem, "nom_usuario") %>' /> 
<asp:Label ID="lblInstitucion" runat="server" CssClass="fieldValue" Text='<%# DataBinder.Eval(Container.DataItem, "nom_institucion") %>' /> 

Die Suchfunktion:

function Search(phrase) { 
    var i, j, k; 
    var fields, foundMatch; 
    var palabra = phrase.value.toLowerCase().split(' '); 
    var datalist = document.getElementById('<%= dt_usuario.ClientID %>'); 
    for (i = 0; i < datalist.rows.length; i++) { 
     foundMatch = false; 
     fields = datalist.rows[i].getElementsByClassName('fieldValue'); 
     for (j = 0; j < palabra.length; j++) { 
      for (k = 0; k < fields.length; k++) { 
       if (fields[k].innerHTML.toLowerCase().indexOf(palabra[j]) >= 0) { 
        foundMatch = true; 
        break; 
       } 
      } 
     } 
     datalist.rows[i].style.display = foundMatch ? '' : 'none'; 
    } 
} 

Answer 2

helfen könnte, ich nehme an, das ist das, was Sie nach. Sie können RegEx.IsMatch(input, pattern)

Zuerst fügen using System.Text.RegularExpressions;

Dann nutzen:

function Seach(phrase) 
    { 
     var word = phrase.value.toLowerCase().split(" "); 
     var datalist = document.getElementById('<%=dt_employee.ClientID%>'); 
     for (var i = 0; i < datalist.length; i++) 
     { 
      var empl = datalist.rows[i].getElementById("lblemployee").value; 
      if (RegEx.IsMatch(empl, word)) 
      { 
       datalist.rows[i].visible = false; 
      } 
     } 

    }