JAVASCRIPT   5

autosuggest.js

Guest on 19th August 2021 04:20:39 PM

  1. /**
  2.  * Autosuggest  
  3.  */
  4.  
  5. var AS_LIST_BOTTOM=1;
  6. var AS_LIST_TOP=2;
  7. var AS_LIST_RIGHT=3;
  8. var AS_LIST_LEFT=4;
  9.  
  10. var sf_autosuggest = {
  11.         defaultOptions : {
  12.                 triggerOnFocus: false,
  13.                 hideOnBlur: true,
  14.                 extraVarName:'',
  15.                 extraVarValue:null,
  16.                 listPosition: AS_LIST_BOTTOM,
  17.                 timeoutHandler:null,
  18.                 timeout:6000,
  19.                 script:null,
  20.                 varname:'search',
  21.                 json:true,
  22.                 maxresults:10,
  23.                 minLengthToTrigger:0,
  24.                 disableEnterKey: false,
  25.                 noresults:'No se encontraron resultados',
  26.                 callback:null,
  27.                 renderItem:null,
  28.                 useFadeEffect:true,
  29.                 useAjax:true,
  30.                 searching:false
  31.         },
  32.         asFields: []
  33. };
  34. var LKS=[];
  35. sf_autosuggest.checkParameters = function (src) {
  36.         for (var param in this.defaultOptions)  {
  37.                 if (param) {
  38.                         if (typeof src[param] == "undefined") {
  39.                                 src[param] = sf_autosuggest.defaultOptions[param];
  40.                         }
  41.                 }
  42.         }
  43. };
  44.  
  45. sf_autosuggest.AutoSuggest = function (objId,options) {
  46.        
  47.   if (!options) options={};
  48.   sf_autosuggest.checkParameters(options);
  49.   var type=typeof objId;
  50.   if (type=="object") {
  51.           var id=$(objId).attr("id");
  52.           if (!id) {
  53.                   id=$.uniqId();
  54.                   $(objId).attr("id",id);
  55.                   objId=id;
  56.           }
  57.   }
  58.   if ($("#"+objId).length==0) {return false;}
  59.  
  60.   $("#"+objId).attr('autocomplete','off').keypress(function(e) {
  61.           if (options.disableEnterKey) {
  62.                  var code = (e.keyCode ? e.keyCode : e.which);
  63.                  if (code==13 && !e.shiftKey) {
  64.                          if ($("#suggestions_"+objId+' li.hovered').length>0) {
  65.                                  $("#suggestions_"+objId+' li.hovered').click();
  66.                          }
  67.                          e.preventDefault();
  68.                          return false;
  69.                  }
  70.           }
  71.   }).keyup(function(e) {
  72.           if (options.minLengthToTrigger!=0 && $("#"+objId).val().length<options.minLengthToTrigger) return;
  73.     //if (sf_autosuggest.asFields[objId].searching) return;
  74. //    if ($("#"+objId).val().length==0)
  75.   //    return;
  76.           if (e.keyCode!=38 && e.keyCode!=40)
  77.                   sf_autosuggest.doAjaxRequest(objId);
  78.   } );
  79.   if (options.triggerOnFocus) {
  80.           $("#"+objId).focus(function() {
  81.             //$("#"+objId).val('');
  82.             sf_autosuggest.doAjaxRequest(objId);
  83.           });
  84.   }
  85.  
  86.         $(document.body).bind('click',function(eventData){
  87.                 var clickSource=$(eventData.target).attr('data-search');
  88.                
  89.                 if (!clickSource) {
  90.                         $("#suggestions_"+objId).remove();
  91.                 }
  92.         });
  93.        
  94.   sf_autosuggest.asFields[objId]=options;
  95. };
  96.  
  97. sf_autosuggest.doAjaxRequest=function(objId) {
  98.   var options=sf_autosuggest.asFields[objId];
  99.   if (!options.useAjax && options.script) {
  100.     options.script(objId);
  101.     sf_autosuggest.asFields[objId].searching=false;
  102.     return;
  103.   }
  104.   var ajaxUrl=options.script;
  105.   if (ajaxUrl.indexOf('?')!=-1) {
  106.     if (ajaxUrl.indexOf('&')==-1)
  107.       ajaxUrl+="&";
  108.   } else
  109.       ajaxUrl+="?";
  110.  
  111.   ajaxUrl+=options.varname+'='+$("#"+objId).val()+'&maxresults='+options.maxresults;
  112.   if (options.extraVarName!='') {
  113.         ajaxUrl+='&'+options.extraVarName+'='+options.extraVarValue;
  114.   }
  115.  
  116.  // console.log('URL: '+ajaxUrl);
  117.   options.searching=true;
  118.   sf_autosuggest.asFields[objId]=options;
  119.   $.ajax({
  120.     url: ajaxUrl,
  121.     cache: false,
  122.     dataType: "json",
  123.     success: function(data) {
  124.       sf_autosuggest.showList(objId,data);
  125.       sf_autosuggest.asFields[objId].searching=false;
  126.     },
  127.     error: function(data, textStatus, errorThrown) {
  128.         showError("Error: "+textStatus+", "+errorThrown);
  129.         sf_autosuggest.asFields[objId].searching=false;
  130.     }
  131.   });
  132. };
  133.  
  134. sf_autosuggest.showList = function (objId,data) {
  135.         var position=$("#"+objId).offset();
  136.         var objTop=position.top;
  137.         var objLeft=position.left;
  138.         var objHeight=parseInt($("#"+objId).css("height").replace("px",""));
  139.         var objWidth=parseInt($("#"+objId).css("width").replace("px",""));;
  140.         var options=sf_autosuggest.asFields[objId];
  141.        
  142.         var itemsReturned=data.results.length;
  143.  
  144.         for (var field in sf_autosuggest.asFields) {
  145.                 if (field!=objId) {
  146.                         if ($("#suggestions_"+field).length>0)
  147.                                 $("#suggestions_"+field).remove();
  148.                 }
  149.         }
  150.         if ($("#suggestions_"+objId).length>0)
  151.                 $("#suggestions_"+objId).remove();
  152.  
  153.         if (itemsReturned || options.noresults) {
  154.                 $(" <div />" ).attr("id","suggestions_"+objId)
  155.                 .addClass("autosuggest")
  156.                 .html('<div class="as_header"><div class="as_bar"></div></div><ul id="as_ul"></ul><div class="as_footer"><div class="as_bar"></div></div>')
  157.                 .appendTo($( "body" ));
  158.                
  159.                 $("#suggestions_"+objId).css('display','block');
  160.                 $("#suggestions_"+objId).css('height', ((itemsReturned*10)+12)+'px');
  161.                 switch (options.listPosition) {
  162.                         case AS_LIST_BOTTOM:
  163.                                 $("#suggestions_"+objId).css('top',(objTop+objHeight+12)+'px');
  164.                                 $("#suggestions_"+objId).css('left', objLeft+'px');
  165.                                 $("#suggestions_"+objId).css('width', objWidth+'px');
  166.                                 break;
  167.                         case AS_LIST_RIGHT:
  168.                                 $("#suggestions_"+objId).css('top',(objTop-objHeight)+'px');
  169.                                 $("#suggestions_"+objId).css('left', (objLeft+objWidth)+'px');
  170.                                 $("#suggestions_"+objId).css('width', '250px');
  171.                                 break;
  172.                 }
  173.         }
  174.         if (itemsReturned>0) {
  175.                 options["lastKeyboardSelected"]=-1;
  176.                 $("#"+objId).keydown(function(e) {
  177.                         if (e.keyCode==38 || e.keyCode==40) {
  178.                                 var opt=sf_autosuggest.asFields[objId];
  179.                                 var lastSelected=opt["lastKeyboardSelected"];
  180.                                 if (lastSelected!=-1)  {
  181.                                         var liADesmarcar=$("#suggestions_"+objId+' li').get(lastSelected);
  182.                                         $(liADesmarcar).removeClass('hovered');
  183.                                 }
  184.                                 if (e.keyCode==40) {
  185.                                         lastSelected++;
  186.                                         if (lastSelected==$("#suggestions_"+objId+' li').length)
  187.                                                 lastSelected=0;
  188.                                 } else {
  189.                                         lastSelected--;
  190.                                         if (lastSelected<0)
  191.                                                 lastSelected=$("#suggestions_"+objId+' li').length-1;
  192.                                 }
  193.                                 console.log("Item selected "+lastSelected);
  194.                                 var liAMarcar=$("#suggestions_"+objId+' li').get(lastSelected);
  195.                                 $(liAMarcar).addClass('hovered');
  196.                                 opt["lastKeyboardSelected"]=lastSelected;
  197.                                 sf_autosuggest.asFields[objId]=opt;
  198.                                 e.keyCode=0;
  199.                                 e.preventDefault();
  200.                         }
  201.                 });
  202.                 for (var x in data.results) {
  203.                         if (x>options.maxresults) break;
  204.                         var item=data.results[x];
  205.                         var html='';
  206.                         if (options.renderItem) {
  207.                                 html=options.renderItem(objId,item,x);
  208.                         } else {
  209.                                 var val=item.value;
  210.                                 var st = val.toLowerCase().indexOf( $("#"+objId).val().toLowerCase() );
  211.                                 var output = val.substring(0,st) + "<em>" + val.substring(st, st+$("#"+objId).val().length) + "</em>" + val.substring(st+$("#"+objId).val().length);
  212.                                 html='<a id="suggestion_'+objId+'_'+x+'" href="javascript:void(0);"><span class="tl"> </span><span class="tr"> </span><span>'+output;
  213.                                 if (item.info) {
  214.                                         html+='<br/><small>'+item.info+'</small>';
  215.                                 }
  216.                                 html+='</span></a>';
  217.                         }
  218.                         var itemLI=$(" <li /> ").html(html).appendTo("#as_ul");
  219.    
  220.                         var insideLink=$(itemLI).find('a');
  221.                         if (insideLink) {
  222.                                 var href=$(insideLink).attr('href');
  223.                                 if (href) {
  224.                                         $(itemLI).css('cursor','pointer').attr("data-href",href).click(function() {
  225.                                                 location.href=$(this).attr("data-href");
  226.                                         });    
  227.                                 }
  228.        
  229.                         }
  230.                         var receivedData=data;
  231.                         var receivedObjId=objId;
  232.                         $('#suggestion_'+objId+'_'+x).click(function() {
  233.                                 var item=$(this).attr("id").replace("suggestion_"+objId+"_","");
  234.                                 var value=receivedData.results[item].value;
  235.                                 var decodedHtml=$('<textarea />').html(value).text();
  236.                                 $("#"+objId).val(decodedHtml);
  237.                                 if (options.callback != null)
  238.                                         options.callback(receivedData.results[item],objId);
  239.                                 $("#suggestions_"+objId).remove();
  240.                         });
  241.                 }
  242.         } else {
  243.                 if (options.noresults) {
  244.                         var html='<span class="tl"> </span><span class="tr"> </span><span>'+options.noresults+'</span></a>';
  245.                         $(" <li /> ").addClass("as_warning").html(html).appendTo("#as_ul");
  246.                 }
  247.         }
  248.         //
  249.         if (options.useFadeEffect) {
  250.                 options.timeoutHandler=setTimeout('sf_autosuggest.fadeOut(\''+objId+'\')',options.timeout);
  251.         }
  252.        
  253. };
  254.  
  255. sf_autosuggest.fadeOut = function (objId) {
  256.         $("#suggestions_"+objId).fadeOut(2000,function() {
  257.                 sf_autosuggest.closeSuggestion(objId);
  258.         }).mouseleave(function(){
  259.                 var id=$(this).attr("id").replace("suggestions_","");
  260.                 var fieldOptions=sf_autosuggest.asFields[id];
  261.                 fieldOptions.timeoutHandler=setTimeout('sf_autosuggest.fadeOut(\''+id+'\')',fieldOptions.timeout);
  262.         }).mouseover(function(){
  263.                 var id=$(this).attr("id").replace("suggestions_","");
  264.                 var fieldOptions=sf_autosuggest.asFields[id];
  265.                 if($(this).is(':animated')) {
  266.                         $(this).stop().animate({opacity:'100'});
  267.                 }
  268.                 clearTimeout(fieldOptions.timeoutHandler);
  269.         });
  270. };
  271.  
  272. sf_autosuggest.closeSuggestion = function(objId) {
  273.         var fieldOptions=sf_autosuggest.asFields[objId];
  274.         clearTimeout(fieldOptions.timeoutHandler);
  275.         $("#suggestions_"+objId).remove();
  276. };

Raw Paste


Login or Register to edit or fork this paste. It's free.