Twitter bootstrap 3 Xpages：如何从搜索字段切换searchClear glypicon

My Xpage有一个引导式搜索字段。当用户在搜索字段中键入内容时，我希望显示clear glypicon，允许用户清除搜索字段并重置视图

我找到了一些代码来执行此操作，但无法将其集成到我的Xpages应用程序中。当我尝试运行此操作并在字段中输入文本时，Chrome会抛出错误：

未捕获的TypeError:无法读取属性 未定义的“toLowerCase”

我的代码如下：

<?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>

有了下面弗兰克的回答，我几乎成功了。我现在唯一的问题是引导问题；重置x显示在搜索按钮上。但我几乎做到了：

<?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>

---

首先，您需要确定问题出在哪里。 您正在调用$（“.searchinput”）.val（），但在代码中没有类为“searchinput”的元素。 将“searchinput”类添加到搜索框中

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

---

首先，您需要确定问题出在哪里。 您正在调用$（“.searchinput”）.val（），但在代码中没有类为“searchinput”的元素。 将“searchinput”类添加到搜索框中

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

Frank，这让我走了，我能够修复CSJ。我现在只是有一个轻微的定位问题，我应该能够解决，或者我可以问另一个问题。弗兰克，这让我开始了，我能够解决CSJ。我现在只是有一个轻微的定位问题，我应该能够解决，或者我可以问另一个问题。