Tag: Event Handlers

HTML5 input type = “Search” implemented in jquery for cross browser support

HTML5 input type “search” is not supported by all the available browsers yet,

So this is a jquery alternative to this html5 feature

for a demo , visit jsFiddle

[html]

<table border="1">
<tr>
<td>Normal :</td>

</tr>
<tr>
HTML5 :

</tr>
<tr>
<td>jQuery :</td>
jqSearchField" />
</tr>
</table>

[/html]

 

 

[javascript]

$.widget(‘iCircle.searchInput’, {

options: {},

_create: function () {

var thisElem = this.element;

var wrapper = $("

“).css({position:”relative”,display:”inline-block”});

thisElem.wrap(wrapper);

// after $.wrap() methed wrapper will have no reference to the DOM Element of wrapper
// so targetElem.parent() will return the wrapper jquery object
wrapper = thisElem.parent();

// draw closebtn
var closeBtnRight = thisElem.outerHeight() – thisElem.innerHeight();
var closeBtnLineHeight = wrapper.height();
var closeBtn = $("").html("X").
css({ position:"absolute",
"font-family": "sans-serif",
right:closeBtnRight+"px",
lineHeight:closeBtnLineHeight+"px",
color:"#0059A0",
visibility:"hidden",
cursor:"pointer"
}).
appendTo(wrapper);

// reduce width and add padding to avoid overlapping on closeBtn
var thisElemWidth = thisElem.width()-closeBtn.outerWidth();
var thisElemMargin = thisElem.css("margin");
thisElem.css({"width":thisElemWidth,margin:thisElemMargin,"padding-right":closeBtn.outerWidth()});

// add click handler to closeBtn
closeBtn.click(function(){
console.log("Click");
thisElem.val("");
});

// add logic to show or hide the close btn
thisElem.keyup(function(){
console.log("keyup");
if(thisElem.val() == ""){
closeBtn.css("visibility","hidden");
}else{
closeBtn.css("visibility","visible");
}
});

wrapper.mouseenter(function(){
console.log("mouseover");
if(thisElem.val() == ""){
closeBtn.css("visibility","hidden");
}else{
closeBtn.css("visibility","visible");
}
});

wrapper.mouseleave(function(){
console.log("mouseleave");
if(!(thisElem.is(":focus"))){
closeBtn.css("visibility","hidden");
}
});

}

});

$("#jqSearchField").searchInput();

[/javascript]