注释:code来源javaeye
使用前要引入jquery库和jquery.hotkeys.js ui
HTML CODE
<div class="searchform"> <form action="" method="post" onsubmit="return false;"> <input type="text" name="top_search" class="text global_search" /> <input type="button" value="" class="subform" /><!--<input type="button" value="" class="subform2" />--></form> <ul id="search_list"> <li><a href="#" title="Private Equity Firms">Private Equity Firms</a></li> <li><a href="#" title="Porfolio Companies">Porfolio Companies</a></li> <li><a href="#" title="Professionals">Professionals</a></li> <li><a href="#" title="Lenders">Lenders</a></li> </ul> <input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" /> </div>
js code
<script type="text/javascript"> //<![CDATA[ /** * @about search part js packaging for pe website 3.28 * @Copyright 2011, WANGXIANG * @MAILTO: flyxiang228@gmail.com */ (function ($) { $.fn.gobalSearch = function (options) { var defaults = { contanier: '', //drop menu contentsearch_list prevTrIndex: '', //mark prevTrIndex items: ['Private Equity Firms', 'Portfolio Companies', 'Professionals', 'Lenders'] //['Private Equity Firms','Portfolio Companies','Professionals','Lenders'] }; var options = $.extend(defaults, options); this.each(function () { var globalSearch = $(this); var searchbtn = globalSearch.next(); var nextele = globalSearch.parent().next(); var drop_li = nextele.children(); var prevEle = $("#" + options.prevTrIndex); //js方法判断当前搜索框触发return按键 /*globalSearch.keydown(function(event){ var evt=event ? event : (window.event ? window.event:null);//兼容IE和FF if (evt.keyCode==13){ nextele.show(); globalSearch.blur(); mainDrop(); } });*/ //jquery借助jquery.hotkey.js插件获取键盘return按键的事件 globalSearch.bind('keydown', 'return', function (evt) { nextele.show(); globalSearch.blur(); mainDrop(); }); drop_li.bind('click', function () { var $this = $(this); var selectVal = $this.text(); var searchVal = globalSearch.val(); var relVal = $this.children('a').attr('rel'); switch (selectVal) { case options.items[0]: window.location.href = relVal + searchVal; break; case options.items[1]: window.location.href = relVal + searchVal; break; case options.items[2]: window.location.href = relVal + searchVal; break; case options.items[3]: window.location.href = relVal + searchVal; break; default: return false; }; nextele.hide(); return false; }); $(document).bind('keydown', 'up', function (evt) { var prevTrIndex = parseInt(prevEle.val()); if (prevTrIndex == -1 || prevTrIndex == 0) { clickTr(trSize - 1); } else if (prevTrIndex > 0) { clickTr(prevTrIndex - 1); }; return false; }).bind('keydown', 'down', function (evt) { var prevTrIndex = parseInt(prevEle.val()); if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)) { clickTr(0); } else if (prevTrIndex < (trSize - 1)) { clickTr(prevTrIndex + 1); }; return false; }).bind('keydown', 'return', function (evt) { var prevTrIndex = parseInt(prevEle.val()); var searchVal = globalSearch.val(); var curli = $("#li_" + prevTrIndex); var selectVal = curli.text(); var relVal = curli.children('a').attr('rel'); switch (selectVal) { case options.items[0]: window.location.href = relVal + searchVal; break; case options.items[1]: window.location.href = relVal + searchVal; break; case options.items[2]: window.location.href = relVal + searchVal; break; case options.items[3]: window.location.href = relVal + searchVal; break; default: return false; }; nextele.hide(); return false; }).bind('click', function () { nextele.hide(); }); searchbtn.click(function () { if (!(nextele.css('display') == 'block')) { nextele.show(); $(this).blur(); mainDrop(); return false; } else { nextele.hide(); return false; }; }).bind('keydown', 'return', function () { nextele.show(); $(this).blur(); mainDrop(); return false; }); //为当前选中的li选中样式 function clickTr(currTrIndex) { var prevTrIndex = prevEle.val(); if (currTrIndex > -1) { $("#li_" + currTrIndex).addClass("current"); } $("#li_" + prevTrIndex).removeClass("current"); prevEle.val(currTrIndex); $("#nuname").val(currTrIndex); }; //下拉菜单添加事件集合方法 function mainDrop() { drop_li.eq(0).focus(); drop_li.removeClass('current'); prevEle.val("-1"); //默认-1 trSize = $("#" + options.contanier).find('li').size(); //li的数量 drop_li.mouseover(function () { //鼠标滑过 $(this).addClass("current"); }).mouseout(function () { //鼠标滑出 $(this).removeClass("current"); }).each(function (i) { //初始化 id 和 index 属性 $(this).attr("id", "li_" + i).attr("index", i); }).click(function () { //鼠标单击 clickTr($(this).attr("index")); }); clickTr(0); return false; }; }); }; })(jQuery); //]]--> </script>