Xpages: Wie man glypicon searchClear vom Suchfeld einstellt

Question

Mein Xpage hat ein Bootstrapart-Suchfeld. Wenn der Benutzer etwas in das Suchfeld eingibt, möchte ich das clear glypicon anzeigen, damit der Benutzer das Suchfeld löschen und die Ansicht zurücksetzen kann.

Ich habe einen Code gefunden, aber ich kann ihn nicht in meine Xpages App integrieren. Wenn ich versuche, dies zu laufen und Text in das Feld eingeben, wirft Chrome den Fehler:

Uncaught Typeerror: Kann Eigenschaft 'toLowerCase' nicht von

undefined lesen

Mein Code ist unten:

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:this.resources> 
     <xp:styleSheet href="/cc_CommonSearchBar.css"></xp:styleSheet> 
    </xp:this.resources> 
    <xp:div style="width:300px" styleClass="btn-group"> 
     <xp:div styleClass="input-group add-on"> 
      <xp:inputText styleClass="input-medium search-query" 
       id="searchinput" type="text"> 
       <xp:this.attrs> 
        <xp:attr name="placeholder" value="Search"></xp:attr> 
       </xp:this.attrs> 
       <xp:eventHandler event="onkeyup" submit="false"> 
        <xp:this.script><![CDATA[var srcClr = XSP.getElementById("#{id:searchclear}"); 
srcClr.toggle(Boolean($(this).val())); 
$(".searchclear").toggle(Boolean($(".searchinput").val())); 
$(".searchclear").click(function(){ 
    $(this).parent().find('.searchinput').val('').focus(); 
    $(this).hide(); 
});]]></xp:this.script> 
       </xp:eventHandler></xp:inputText> 
      <xp:span id="searchclear" 
       styleClass="searchclear glyphicon glyphicon-remove-circle"> 
      </xp:span> 
      <xp:div styleClass="input-group-btn"> 
       <xp:button styleClass="btn btn-default" type="submit" 
        style="height:34px"> 
        <i class="glyphicon glyphicon-search" /> 
       </xp:button> 
      </xp:div> 
     </xp:div> 
      </xp:div> 
</xp:view> 

Mit Franks Antwort unten konnte ich das fast zum Laufen bringen. Mein einziges Problem ist jetzt ein Bootstrap-Problem; Das Zurücksetzen x erscheint über der Suchschaltfläche. Aber ich habe es fast:

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:this.resources> 
     <xp:styleSheet href="/cc_CommonSearchBar.css" /> 
    </xp:this.resources> 
    <div class="input-group" style="width:300px"> 
     <!--  <div class="btn-group">--> 
     <input id="searchinput" type="text" class="form-control" 
      placeholder="Search for..." /> 
     <span id="searchclear" class="glyphicon glyphicon-remove-circle" /> 
     <span class="input-group-addon" id="basic-addon2"> 
      <i class="glyphicon glyphicon-search" /> 
     </span> 
    </div> 
    <xp:scriptBlock id="scriptBlock1"> 
     <xp:this.value><![CDATA[$(document).ready(function(){ 
    $("#searchinput").keyup(function(){ 
     $("#searchclear").toggle(Boolean(this.value)); 
    }); 
     $("#searchclear").toggle(Boolean($("#searchinput").val())); 
     $("#searchclear").click(function(){ 
      $("#searchinput").val("").focus(); 
      $("#searchclear").hide(); 
     }); 
});]]></xp:this.value> 
    </xp:scriptBlock> 
</xp:view> 

Answer 1

zuerst müssen Sie identifizieren, wo genau es schief geht. Sie rufen $ (". Searchinput"). Val(), aber in Ihrem Code gibt es kein Element mit einer Klasse 'searchinput'. Fügen Sie entweder die Sucheingabeklasse zum Suchfeld hinzu.

<xp:inputText styleClass="searchinput input-medium search-query" 
       id="searchinput" type="text"> 
</xp:inputText>