Topic: Jquery li select

Hey guys, new to this forum...
I am working on an Ajax autosuggest for an offline browser-based GPLd accounting app.

Everything is working except the keyboard control to enter the Suggestion DIV, selecting the first < li >. ANY Tips??

Code below:

function findPos(obj) { //find the REAL position of the parent object, especially useful when scrolling can occur

    var curleft = curtop = 0;

    if (obj.offsetParent) {

do {

            curleft += obj.offsetLeft;    



} while (obj = obj.offsetParent);



return [curleft];

}

}



function jQajax(ipfield,ajd,dbtable,company,select,element){

    if (!ipfield || !ajd || !dbtable || !company || !select || !element){alert("Parameters not sent to ajax handler correctly; Input to act on, Ajax Div, Database table to check, Company (database name), Field to select, Element Id. "); return false;}

    actobj="#"+ipfield;// set the active object for jQuery

    ajdiv="#"+ajd; //set the ajax responding div

    //var offset = $(actobj).offset();

    //leftpos= offset.left;

    leftpos = findPos($(actobj));

    var width = $(actobj).width()-2;

    $(ajdiv).css("left",leftpos); 

    $(ajdiv).css("width",width);

    $(actobj).keyup(function(event){

         //alert(event.keyCode);

         //Key presses you need to know: 40=down 38=up 13=Enter 27=ESC 8=Bkspc 46=DEL

         var keyword = $(actobj).val();

         if(keyword.length)

         {

             if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)

             {

                 

                 $.ajax({

                   type: "GET",

                   url: "includes/ajax_server.php",

                   cache: false,

                   data: "company="+company+"&data="+keyword+"&table="+dbtable+"&select="+select,

                   success: function(msg){    

                    if(msg != 0)

                      $(ajdiv).fadeIn("slow").html(msg);

                    else

                      $(ajdiv).fadeOut("slow");    

                                       }

                 });

             }

             else

             {

                switch (event.keyCode)

                {

                 case 40:

                 //alert("you pressed down");

                 {

                      found = 0;

                      $("li").each(function(){

                         if($(this).attr("class") == "selected")

                            found = 1;

                      });

                      if(found == 1)

                      {

                        var sel = $("li[class='selected']");

                        sel.next().addClass("selected");

                        sel.removeClass("selected");

                      }

                      else

                        $("li:first").addClass("selected");

                     }

                 break;

                 case 38:

                 {

                      found = 0;

                      $("li").each(function(){

                         if($(this).attr("class") == "selected")

                            found = 1;

                      });

                      if(found == 1)

                      {

                        var sel = $("li[class='selected']");

                        sel.prev().addClass("selected");

                        sel.removeClass("selected");

                      }

                      else

                        $("li:last").addClass("selected");

                 }

                 break;

                 case 13:

                    $(ajdiv).fadeOut("slow");

                    $(actobj).val($("li[class='selected'] a").text());

                    loadSkuDetails(element);

                    $(ajdiv).fadeOut("slow");

                 break;

                }

             }

         }

         else

            $(ajdiv).fadeOut("slow");

    });

    $(ajdiv).mouseover(function(){

        $(this).find("li a:first-child").mouseover(function () {

              $(this).addClass("selected");

        });

        $(this).find("li a:first-child").mouseout(function () {

              $(this).removeClass("selected");

        });

        $(this).find("li a:first-child").click(function () {

              $(actobj).val($(this).text());

              loadSkuDetails(element);

              $(ajdiv).fadeOut("slow");

        });

    });

};

Vote up Vote down

Re: Jquery li select

Sorry guy. I haven't gone deep into jQuery and keyboard/keystroke trapping.

Stefan

Practical web design training videos: KillerSites University

Vote up Vote down