Need to simulieren keypress jquery

Question

Ich habe eine Funktion, die den Wert einer Textbox (prodinput) verwendet, um Links in einer Dropdown-Liste zu verbergen/anzuzeigen. Es funktioniert, wenn ein Benutzer einen String manuell eingibt, aber wenn ich den Wert automatisch durchgeben will, indem ich einen URL-Parameter übergebe, muss ich einen Keyup oder Keydown auslösen, damit er die Funktion aufruft. Hier

ist die Funktion, die Suche hat (in der core.js):

prodinput.on('keyup, keydown',function() { 
    var search = $(this).val().toLowerCase(); 
    $('.support-product .browse-products a').each(function() { 
     if($(this).text().toLowerCase().search(search) > -1) { 
      $(this).parent().show(); 
     } else { 
      $(this).parent().hide(); 
     } 
    }); 
}); 

Hier ist die Funktion, die ich bin mit der Funktion oben (auf der Seite auslösen Ich versuche, . laufen auf

$(function(){ 
       $target = $('.browse-products .display'); 
       $target.val($trimmed); 
       $('.browse-products').addClass('active'); 
       $target.focus(); 
       var e = jQuery.Event("keydown"); 
       $target.trigger(e); 
      }); 

ich habe versucht mit:

$target.keyup(); 

und wie oben gezeigt:

var e = jQuery.Event("keydown"); 
$target.trigger(e); 

Ich frage mich, ob es ein Problem mit der Reihenfolge ist, in der die Dinge auf der Seite geladen werden.

Answer 1

Ich würde Ihren Schlüsselcode in eine benannte Funktion setzen.

Answer 2

Sie Unter der Annahme, nicht alten Browser unterstützen müssen, können Sie nur für das input Ereignis hören, die keypress und Änderungsereignisse abdeckt. Dann, nach dem Hörer einfach Anbringen löst die Veranstaltung:

$(function() { 
 
    $("#prodinput").on('input', function() {//alternatively you could use change and keyup 
 
    var search = $(this).val().toLowerCase(); 
 
    $('.support-product .browse-products a').each(function() { 
 
     if ($(this).text().toLowerCase().search(search) > -1) { 
 
     $(this).parent().show(); 
 
     } else { 
 
     $(this).parent().hide(); 
 
     } 
 
    }); 
 
    }).trigger("input");//trigger the event now 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="search" id="prodinput" value="peanuts" /> 
 
<div class="support-product"> 
 
    <ul class="browse-products"> 
 
    <li><a href="#">jam</a></li> 
 
    <li><a href="#">elephants</a></li> 
 
    <li><a href="#">peanuts</a></li> 
 
    </ul> 
 
</div>