/** a jquery plugin for search hints author: lorenzo cioni - https://github.com/lorecioni */ (function($) { $.fn.autocomplete = function(params) { //selections var currentselection = -1; var currentproposals = []; //default parameters params = $.extend({ hints: [], placeholder: '请输入行业名称查询', // width: 200, // height:30, showbutton: true, buttontext: '', onsubmit: function(text){}, onblur: function(){} }, params); //build messagess this.each(function() { //container var searchcontainer = $('
') .addclass('autocomplete-container') .css('height', params.height * 2); //text input var input = $('') .attr('placeholder', params.placeholder) .addclass('autocomplete-input') .css({ 'width' : params.width, 'height' : params.height }); if(params.showbutton){ input.css('border-radius', '4px'); } //proposals var proposals = $('
') .addclass('proposal-box') .css('width', params.width) // .css('top', input.height() + 53); var proposallist = $('') .addclass('proposal-list'); proposals.append(proposallist); input.keydown(function(e) { switch(e.which) { case 38: // up arrow e.preventdefault(); $('ul.proposal-list li').removeclass('selected'); if((currentselection - 1) >= 0){ currentselection--; $( "ul.proposal-list li:eq(" + currentselection + ")" ) .addclass('selected'); } else { currentselection = -1; } break; case 40: // down arrow e.preventdefault(); if((currentselection + 1) < currentproposals.length){ $('ul.proposal-list li').removeclass('selected'); currentselection++; $( "ul.proposal-list li:eq(" + currentselection + ")" ) .addclass('selected'); } break; case 13: // enter if(currentselection > -1){ var text = $( "ul.proposal-list li:eq(" + currentselection + ")" ).html(); input.val(text); } currentselection = -1; proposallist.empty(); params.onsubmit(input.val()); break; case 27: // esc button currentselection = -1; proposallist.empty(); input.val(''); break; } }); input.bind("change paste keyup", function(e){ if(e.which != 13 && e.which != 27 && e.which != 38 && e.which != 40){ currentproposals = []; currentselection = -1; proposallist.empty(); if(input.val() != ''){ var word = "^" + input.val() + ".*"; proposallist.empty(); for(var test in params.hints){ if(params.hints[test].match(word)){ currentproposals.push(params.hints[test]); var element = $('
  • ') .html(params.hints[test]) .addclass('proposal') .click(function(){ input.val($(this).html()); proposallist.empty(); params.onsubmit(input.val()); }) .mouseenter(function() { $(this).addclass('selected'); }) .mouseleave(function() { $(this).removeclass('selected'); }); proposallist.append(element); } } } } }); input.blur(function(e){ currentselection = -1; //proposallist.empty(); params.onblur(); }); searchcontainer.append(input); searchcontainer.append(proposals); if(params.showbutton){ //search button var button = $('
    ') .addclass('autocomplete-button') .html(params.buttontext) .click(function(){ proposallist.empty(); params.onsubmit(input.val()); }); searchcontainer.append(button); } $(this).append(searchcontainer); if(params.showbutton){ //width fix searchcontainer.css('width', params.width + button.width() + 50); } }); return this; }; })(jquery);