safari浏览器jquery搜索框效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 safari浏览器jquery搜索框效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>safari浏览器jquery搜索框效果</title>
 <link rel="stylesheet" href="./stylesheets/j-searcher.css" type="text/css" media="screen">

		<!--[if lt IE 8]>
      <link rel="stylesheet" href="./stylesheets/j-searcher.ie.css" type="text/css" media="screen">
		<![endif]-->

		<!--[if IE 6]>
      <link rel="stylesheet" href="./stylesheets/j-searcher.ie6.css" type="text/css" media="screen">
		<![endif]-->

    <script src="./javascripts/global/inheritance.js" type="text/javascript" charset="utf-8"></script>
    <script src="./javascripts/global/templating.js" type="text/javascript" charset="utf-8"></script>

    <script src="./javascripts/jquery.core-1.3.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="./javascripts/jquery.dependClass.js" type="text/javascript" charset="utf-8"></script>
    <script src="./javascripts/jquery.searcher.js" type="text/javascript" charset="utf-8"></script>
    
    <style type="text/css" media="screen">

      body { background: white; padding: 0; margin: 0; }
      .layout  { padding: 20px; font-family: Georgia, serif; }
      .searcher-container { position: relative; left: -7px; }

      .comment { color: gray; font-size: 12px; }
      pre { font-size: 14px; }
    </style>

	</head>
<body>
  
  <div class="layout">

    <h3>Simple search:</h3>
    <div class="searcher-container" style="width: 200px">
      <input id="SimpleSearcher" type="search" placeholder="Search" autocomplete="off" />
    </div>
    <script type="text/javascript" charset="utf-8">
      $("#SimpleSearcher").searcher();
    </script>
    <p>
<pre>
&lt;div style="width: 200px"&gt; <span class="comment">&larr; Define searcher width by setting width to parent node.</span>
  &lt;input id="SimpleSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"
  /&gt;
&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#SimpleSearcher").searcher();
&lt;/script&gt;
</pre>
    </p>
    <br/>

    <h3>Incremental search:</h3>
    <div class="searcher-container" style="width: 200px">
      <input id="IncrementalSearcher" type="search" placeholder="Search" incremental="yes" onsearch="onSearchHandler.apply(this, arguments)" autocomplete="off" />
    </div>
    <script type="text/javascript" charset="utf-8">
      $("#IncrementalSearcher").searcher();
      function onSearchHandler(){
        this.loading(true);
        /* AJAX or simple JavaScript actions */
      }
    </script>
    <p>
<pre>
&lt;div style="width: 200px"&gt;
  &lt;input id="IncrementalSearcher"
    type="search"
    placeholder="Search"
    autocomplete="off"

    <strong>incremental=</strong>"yes"
    <strong>onsearch=</strong>"onSearchHandler.apply(this, arguments)"

  /&gt;
&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#IncrementalSearcher").searcher();
  function onSearchHandler(){
    this.loading(true);
    <span class="comment">/* AJAX or simple JavaScript actions */</span>
  }
&lt;/script&gt;
</pre>
    </p>
    <br/>
    
    <h3>Getting Search Object</h3>
    <p>
<pre>
&lt;script type="text/javascript" charset="utf-8"&gt;
  $("#IncrementalSearcher").data("SearchHandler")<span class="comment">.onsearch = function(){ /* whatever */ };</span>
&lt;/script&gt;
</pre>
    </p>
</body>
</html>

JS代码(jquery.searcher.js):

/**************************************************Class:Pretty SearchAuthor:Egor Hmelyoff (hmelyoff@gmail.com)TODO:— allow safari to use own input[type=search]— find and return object if exist**************************************************/
/*global document,jQuery */
(function( $ ){
	$.fn.searcher = function( options ){
	return this.each(function(){
	new jSearcher( this,options );
}
);
}
;
	var OPTIONS ={
	className:"j-searcher",template:tmpl( '<div <%=params.id%> class="<%=className%>">' +'<div class="<%=className%>_left"><i></i></div>' +'<div class="<%=className%>_container">' + '<div class="<%=className%>_right"><i></i></div>' + '<div class="<%=className%>_container">' +'<span class="<%=className%>_placeholder"><%=params.placeholder%></span>' +'<input type="text" name="<%=params.name%>" value="<%=params.value%>" class="<%=className%>_input <%=params.className%>" results="<%=params.results%>" autocomplete="<%=params.autocomplete%>" />' +'<span class="<%=className%>_spinner"></span>' +'<span class="<%=className%>_clear"></span>' +'</div>'+'</div>'+ '</div>' )}
;
	var jSearcher = Class.extend({
	init:function( node,options ){
	this.is ={
	input:false}
;
	this.domNode = $(node);
	this.options = $.extend(true,{
}
,OPTIONS,options ? options:{
}
);
	this.options.params ={
	width:this.domNode.width()-13}
;
	if( this.domNode.is("input") ){
	// create node by template $.extend(this.options.params,{
	// attrs id:this.domNode.attr("id") ? ('id="' + this.domNode.attr("id") + '"'):'',className:this.domNode.attr("class"),placeholder:this.domNode.attr("placeholder") ? this.domNode.attr("placeholder"):'',results:this.domNode.attr("results") ? this.domNode.attr("results"):0,autocomplete:this.domNode.attr("autocomplete") ? this.domNode.attr("autocomplete"):'on',incremental:this.domNode.attr("incremental") ? this.domNode.attr("incremental"):'no',onsearch:this.domNode.attr("onsearch") ? this.domNode.attr("onsearch"):function(){
}
,// form name:this.domNode.attr("name") ? this.domNode.attr("name"):'q',value:this.domNode.attr("value") ? thid.domNode.attr("value"):''}
);
	var template = $(this.options.template( this.options ));
	template.find( "." + this.options.className +"_container input" ).css({
	outlineWidth:0}
);
	this.domNode.replaceWith(template);
	this.domNode = template;
}
else if(this.domNode.is("." + this.options.className)){
	// init already templated node var input = this.domNode.find("." + this.options.className + "_input");
	$.extend(this.options.params,{
	placeholder:this.domNode.find("." + this.options.className + "_placeholder").html(),incremental:input.attr("incremental") ? input.attr("incremental"):'no',onsearch:input.attr("onsearch") ? input.attr("onsearch"):function(){
}
,value:input.attr("value") ? input.attr("value"):''}
);
	input.css({
	outlineWidth:0}
);
}
else{
	// wtf? stop here return false;
}
// continue init by datathis.domNode.data("SearchHandler",this);
	if(!this.options.params.value && this.options.params.placeholder){
	this.placeholder(true);
}
if(this.options.params.value){
	this.clear(true);
}
this._events();
}
,_events:function(){
	var self = this;
	var input = this.domNode.find("." + this.options.className + "_input");
	this.domNode .mousedown(function(){
	self.placeholder(false);
	self.domNode.addDependClass("focus");
	if(!self.is.input) return false;
	else self.is.input = false;
}
) .mouseup(function(){
	input.focus();
}
);
	input .focus(function(){
	self.domNode.addDependClass("focus");
	self.placeholder(false);
}
) .blur(function(){
	self.domNode.removeDependClass("focus");
	if(!input.val()) self.placeholder(true);
}
) .keyup(function(){
	if(input.val()) self.clear(true);
	else self.clear(false);
	self.value = input.val();
	if(self.options.params.incremental == 'yes'){
	self.onsearch();
}
}
) .mousedown(function(){
	self.is.input = true;
}
) .change(function(){
	self.value = input.val();
	if(self.options.params.incremental == 'yes'){
	self.onsearch();
}
}
) .parents("form").submit(function(){
	self.onsubmit();
}
);
	this.domNode.find("." + this.options.className + "_clear") .mousedown(function(){
	$(this).addDependClass("down","_");
	input.focus().select();
	return false;
}
) .click(function(){
	self.value = input.val("").focus().val();
	$(this).removeDependClass("down","_").hide();
	if(self.options.params.incremental == 'yes'){
	self.onsearch();
}
}
);
	this.onsearch = function(){
	if($.isFunction(this.options.params.onsearch)){
	this.options.params.onsearch.apply(self);
}
else{
	eval(this.options.params.onsearch);
}
}
;
	this.events();
}
,events:function(){
}
,onsearch:function(){
}
,onsubmit:function(){
	this.onsearch();
}
,placeholder:function( b ){
	var p = this.domNode.find("." + this.options.className + "_placeholder");
	if( b ) p.show();
	else p.hide();
}
,clear:function( b ){
	var p = this.domNode.find("." + this.options.className + "_clear");
	if( b ) p.show();
	else p.hide();
}
,loading:function( b ){
	if( b ) this.domNode.addDependClass("loading");
	else this.domNode.removeDependClass("loading");
}
}
);
}
)( jQuery );

CSS代码(j-searcher.ie.css):

/* Pretty search replacer */
 .j-searcher .j-searcher_input{top:4px;}
.j-searcher .j-searcher_right{width:expression(parentNode.offsetWidth + "px");}
/* Pretty search replacer (end) */

附件:下载该文件资源,减少时间成本(增值服务)