keyup problem

Hello,

I'm trying to understand the working of an autosuggest function. al few weeks ago i found an example somwhere on the www.

Trying to understand i have rewrite the function. but now i found a problem and i can't figerout wher it come from.

http://www.magiclights.nl/test/

You can try it online. when you type a sugestion in the input area, you get a few sugestions. Then you can select them whit your keybord or mouse.

Whit mouse is no problem. but when you select whit enter the sected item is send to many times into

$('.selected').text()

see the alert, on the testsite: in stead of 1 time 'Grondverf Histor 5 Liter' you have (depending how many key's you enterd) you get somthing like this : ''Grondverf Histor 5 Liter'Grondverf Histor 5 Liter'Grondverf Histor 5 Liter'

The problem code is:

<script type="text/javascript">
$(function(){
$('.delART2').live('click', function() {
$(this).closest('.materiaal_lijst div').remove();
});
$('.zoeken').live('click', function() {
var txt_ID = $(this).attr('id');
});
$('.txt_ding2').live('keyup', function(event) {

      var txt_ID = $(this).attr('id');

      var div_sug_ID = txt_ID.substring(8);

      $('<div class="SUGESTIE"><img src="../../images/ico/arrow.png" /><ul></ul></div>').appendTo('.sugest');

      var fieldParent=$(this).parents('div.sugest');

       if(event.which!=39&&event.which!=37&&event.which!=38&&event.which!=40&&event.which!=13&&event.which!=9)
       {
        if(event.which == 8)
        {
         teller--;
        }
        else
        {
         teller++;
        }

        if($(this).val().length >=2)
        {

        var dataInput = $(this).val();

        var blaat = null;
         $.ajax({type:'POST',
          url:'data.php',
          dataType:"html",
          data:"data="+dataInput+"&id="+txt_ID+blaat,
          success:
          function(data)
          {
           $('#'+txt_ID).parent('.sugest').children('.SUGESTIE').fadeIn('fast');
           $('#'+txt_ID).parent('.sugest').find('.SUGESTIE > ul').html(data);
           //$('#'+id+":eq(0)").removeClass('ausu-load');
          }
         });

        }
        else
        {
         $('#'+txt_ID).parent('.sugest').children('.SUGESTIE').fadeOut('fast');
        }
       }
       else
       {

        var fieldChild=fieldParent.find('.SUGESTIE > ul');
        switch(event.which)
        {
         case 40:
         {
          keyEvent(fieldChild,'next');
          break;
         }
         case 38:
         {
          keyEvent(fieldChild,'prev');
          break;
         }
         case 13:
         {

          var artikel_lang = $('.selected').text();
          var aantal_char = artikel_lang.length;
          fieldParent.children('input:eq(0)').val($('.selected').text());
          alert($('.selected').text());
           (0,aantal_char/teller));
          $('.SUGESTIE').fadeOut('fast');
          return false;
          break;
         }
         case 9:
         {
          alert('9');
          offFocus(this);$("li").removeClass("selected");
          break;
         }
        }
       }

       $(".sugest").bind("keypress",function(event)
       {                                                                                                                                    if(event.keyCode==13)return false;
       });

       $(this).live("blur",function()
       {
        offFocus(this);
        $("li").removeClass("selected");
       });
});
$('.insertART2').live('click', function() {
          teller =0;
  var i = $('#offerte .materiaal_lijst').size()+1;     //
var nieuwe ='<li class="materiaal_lijst">\n';
nieuwe +='<div class="sugest" style=" margin-top: -5px; height:20px;">\n';
nieuwe +='<img class="delART2" src="images/delete.png" height="20" width="20" title="Verwijder item" alt="Verwijder item" />\n';
nieuwe +='<img class="zoeken" src="images/magnifying_glass.png" height="20" width="20" title="zoek item" alt="zoek item" />\n';
nieuwe +='<img class="insertART2" src="images/key_enter.png" height="20" width="20" title="Item invoegen" alt="Item invoegen" />\n';
nieuwe += ' <input class="txt_ding2" type="text" value="" name="artikel_'+i+'" id="artikel_'+i+'"/>\n';
nieuwe += ' <input class="txt_ding3" type="text" value="" name="artikelID_'+i+'" id="artikelID_'+i+'"/>\n';
//nieuwe +='<textarea class="txt_ding2" name="artikel_'+i+'" id="artikel_'+i+'">'+i+'</textarea>\n';
//nieuwe +='<textarea class="txt_ding3" name="artikelID_'+i+'" id="artikelID_'+i+'">'+i+'</textarea>\n';
//nieuwe +='<div class="SUGESTIE"><img src="../../images/ico/arrow.png" /><ul>sdf</ul></div>\n';
nieuwe +='</div>\n';
nieuwe +='</li>\n';
   //$(nieuwe).appendTo('#offerte');
   $(nieuwe).insertAfter($(this).parent().parent() );
         });
//$('.itemDelete').live('click', function() {
$(".SUGESTIE > ul li").live('click',function()
{


  var fieldParent=$(this).parents('div.sugest');
  fieldParent.children('input:eq(0)').val($(this).text());
  $('.SUGESTIE').fadeOut('fast');
});

$('.selected').live('keypress', function(event)
{
  if(event.which == '13')
  {
   var fieldParent=$(this).parents('div.sugest');
  fieldParent.children('input:eq(0)').val($(this).text());
  $('.SUGESTIE').fadeOut('fast');
  }
});
});
function keyEvent(fieldChild,action)
{
  var yx =0;
  fieldChild.find("li").each(function()
  {
   //alert('4')
   if($(this).attr("class")=="selected")
   {
    yx=1;
    //alert('hier');
   }
   //alert(this);
  });

  if(yx==1)
  {
   var sel=fieldChild.find("li[class='selected']");
   (action=='next')?sel.next().addClass("selected"):sel.prev().addClass("selected");
   sel.removeClass("selected");
   //alert('b');
  }
  else
  {
   (action=='next')?fieldChild.find("li:first").addClass("selected"):fieldChild.find("li:last").addClass("selected");
   //alert('c');
  }

  //alert($("li[class='selected'] a").text());
}

  function offFocus(fieldChild)
  {
   var fieldParent=$(fieldChild).parents('div.'+config.className);
   fieldParent.children('div.ausu-suggestionsBox').delay(config.fadeTime).fadeOut();
  }


</script>
</head>
<body>
<div style="border:double #39F;">
    <dl id="offerte" style="list-style:none;">
        <dt class="materiaal_lijst">
            <div class="sugest" style=" margin-top: -5px;height:20px;">
                <img class="delART2" src="images/delete.png" height="20" width="20" title="Verwijder item" alt="Verwijder item" />
                <img class="zoeken" src="images/magnifying_glass.png" height="20" width="20" title="zoek item" alt="zoek item" />
                 <img class="insertART2" src="images/key_enter.png" height="20" width="20" title="Item invoegen" alt="Item invoegen" />
                 <input class="txt_ding2" type="text" value="" name="artikel_1" id="artikel_1"/>
                 <input class="txt_ding3" type="text" value="" name="artikelID_1" id="artikelID_1"/>
               

            </div>
        </dt>
    </dl>
</div>

Sorry for my englisch writing, i 'm not verry good at it ;)

I have no idee how i can solve this problem... thx...

Topic Participants
martijn_damen
jay.blanchard

keyup problem

keyup problem

Topic Participants

martijn_damen

jay.blanchard