Question

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

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

未捕获的TypeError：无法读取属性＆＃39; toLowerCase＆＃39;未定义的

我的代码如下：

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

Answer 1

首先，您需要确定出错的地方。你正在调用$（＆＃34; .searchinput＆＃34;）。val（），但是在你的代码中没有一个带有类＆＃39; searchinput＆＃39;的元素。添加＆＃39; searchinput＆＃39;类到搜索框。

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

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

1 个答案: