Jump to content

Jquery li select


onyx

Recommended Posts

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");

       });

   });

};

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...