koha-tmpl/intranet-tmpl/prog/en/includes/circ-search.inc

   1 <!-- Begin Circulation Resident Search Box -->
   2
   3 <!-- TMPL_IF NAME="CircAutocompl" -->
   4
   5 <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/utilities/utilities.js"></script>
   6 <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/autocomplete/autocomplete-min.js"></script>
   7 <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event-min.js"></script>
   8 <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>
   9
  10 <style type="text/css">
  11 .yui-skin-sam .yui-ac {
  12     position:relative;
  13     font-size:100%;
  14 }
  15 .yui-skin-sam .yui-ac-input {
  16     position:absolute;
  17     width:100%;}
  18 .yui-skin-sam .yui-ac-container {
  19     position:absolute;
  20     top:1.6em;
  21     width:100%;
  22 }
  23 .yui-skin-sam .yui-ac-content {
  24     position:absolute;
  25     width:100%;
  26     border:1px solid #808080;
  27     background:#fff;
  28     overflow:hidden;
  29     z-index:9050;
  30 }
  31 .yui-skin-sam .yui-ac-shadow {
  32     position:absolute;
  33     margin:.3em;
  34     width:100%;
  35     background:#000;
  36     -moz-opacity:0.10;
  37     opacity:.10;
  38     filter:alpha(opacity=10);
  39     z-index:9049;
  40 }
  41 .yui-skin-sam .yui-ac-content ul {
  42     margin:0;
  43     padding:0;
  44     width:100%;
  45 }
  46 .yui-skin-sam .yui-ac-content li {
  47     margin:0;
  48     padding:2px 5px;
  49     cursor:default;
  50     white-space:nowrap;
  51 }
  52 .yui-skin-sam .yui-ac-content li.yui-ac-prehighlight {
  53     background:#B3D4FF;
  54 }
  55 .yui-skin-sam .yui-ac-content li.yui-ac-highlight {
  56     background:#426FD9;
  57     color:#FFF;
  58 }
  59
  60
  61
  62 #borrowerautocomplete { width: 405px; text-align:left;} /* z-index needed on top instances for ie & sf absolute inside relative issue */
  63 .autocomplete { width:130px; }/* set width of widget here*/
  64 .autocomplete .yui-ac-highlight ,
  65 .autocomplete .yui-ac-highlight .sample-result,
  66 .autocomplete .yui-ac-highlight .sample-query { color:#FFF; }
  67 .autocomplete .sample-result { color: black; }
  68 .autocomplete .sample-query { color:#000; }
  69 #findborrower { position:static; width:335px; }  */
  70 #yborrowercontainer { text-align:left;width:300px; }
  71 </style>
  72
  73 <script type="text/javascript">
  74
  75 YAHOO.util.Event.onContentReady("header_search", function() {
  76
  77     new function() {
  78         // Define a custom formatter function
  79         this.fnCustomFormatter = function(oResultItem, sQuery) {
  80             var name        = oResultItem[0];
  81             var cardnumber  = oResultItem[1];
  82             var address     = oResultItem[2];
  83             var city        = oResultItem[3];
  84             var zip         = oResultItem[4];
  85             var aMarkup = [
  86                 "<div class='sample-result'>",
  87                 name,
  88                 " (",
  89                 cardnumber,
  90                 ")<small> -- ",
  91                 address,
  92                 ", ",
  93                 city,
  94                 "</small>",
  95                 "</div>"];
  96             return (aMarkup.join(""));
  97         };
  98
  99         // Instantiate one XHR DataSource and define schema as an array:
 100         //     ["Record Delimiter",
 101         //     "Field Delimiter"]
 102         this.oACDS = new YAHOO.widget.DS_XHR("/cgi-bin/koha/circ/ysearch.pl", ["\n", "\t"]);
 103         this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
 104         this.oACDS.maxCacheEntries = 60;
 105         this.oACDS.queryMatchSubset = true;
 106
 107         // Instantiate first AutoComplete
 108         var myInput = document.getElementById('findborrower');
 109         var myContainer = document.getElementById('yborrowercontainer');
 110         this.oAutoComp = new YAHOO.widget.AutoComplete(myInput,myContainer,this.oACDS);
 111         //this.oAutoComp.delimChar = ";";
 112         //this.oAutoComp.queryDelay = 1;
 113         this.oAutoComp.formatResult = this.fnCustomFormatter;
 114 }
 115 });
 116
 117
 118 </script>
 119
 120 <!-- /TMPL_IF -->
 121
 122 <div id="header_search">
 123
 124 <div id="circ_search" class="residentsearch">
 125     <p class="tip">Enter patron card number or partial name:</p>
 126     <form action="/cgi-bin/koha/circ/circulation.pl" method="post">
 127
 128 <!-- TMPL_IF NAME="CircAutocompl" -->
 129
 130     <div class="yui-skin-sam">
 131             <div id="borrowerautocomplete" class="autocomplete">
 132                 <input autocomplete="off" id="findborrower" name="findborrower" class="focus" type="text" />
 133                 <div id="yborrowercontainer"></div>
 134                 <input id="ysearchsubmit" type="submit" value="Submit">
 135                 <input name="branch" value="<!-- TMPL_VAR name="branch" -->" type="hidden" />
 136                 <input name="printer" value="" type="hidden" />
 137             </div>
 138         </div>
 139
 140 <!-- TMPL_ELSE -->
 141
 142             <input id="findborrower" name="findborrower" size="40" class="focus" type="text" />
 143             <input name="branch" value="<!-- TMPL_VAR name="branch" -->" type="hidden" />
 144             <input name="printer" value="" type="hidden" />
 145             <input value="Submit" type="submit" />
 146
 147 <!-- /TMPL_IF -->
 148
 149     </form>
 150 </div>
 151
 152 <div id="checkin_search" class="residentsearch">
 153     <p class="tip">Scan a barcode to check in:</p>
 154     <form method="post" action="/cgi-bin/koha/circ/returns.pl">
 155         <input name="barcode" id="ret_barcode" size="40" maxlength="14" />
 156         <input value="Submit" type="submit" />
 157     </form>
 158 </div>
 159
 160 <div id="catalog_search" class="residentsearch">
 161     <p class="tip">Enter search keywords:</p>
 162     <form action="/cgi-bin/koha/catalogue/search.pl"  method="get" id="cat-search-block">
 163         <input type="text" name="q" id="search-form" size="40" />
 164         <input type="submit" class="form-submit" value="Submit"/>
 165     </form>
 166 </div>
 167
 168 <ul>
 169     <li><a href="/cgi-bin/koha/circ/circulation.pl#circ_search">Check Out</a></li>
 170     <li><a href="/cgi-bin/koha/circ/returns.pl#checkin_search">Check In</a></li>
 171     <li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the Catalog</a></li>
 172 </ul>
 173
 174 </div>
 175
 176 <!-- End Circulation Resident Search Box -->