Xpages: How to toggle searchClear glypicon from search field - twitter-bootstrap-3

Question

My Xpage has a Bootstrap style search field. When the user types something in the search field I want the clear glypicon to appear, allowing the user to clear the search field and reset the view.
I found some code to do this but am unable to integrate it into my Xpages app. When I try to run this and enter text into the field, Chrome throws the error:
Uncaught TypeError: Cannot read property
'toLowerCase' of undefined
My code is below:
<?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>
With Frank's answer below I was able to get this to almost work. My only problem now is a bootstrap issue; the reset x appears over the search button. But I almost have it:
<?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

first you need to identify where exactly it is going wrong.
You are calling $(".searchinput").val(), but in your code there is no element with a class 'searchinput'.
Either add 'searchinput' class to the search box.
<xp:inputText styleClass="searchinput input-medium search-query"
id="searchinput" type="text">
</xp:inputText>