He implementado una función de búsqueda y funciona si buscamos la palabra clave escribiendo.
<input type="text" class="txtInput" id="searchTheKey" placeholder="Enter the keywords to search....."> </label> <ul id="matchKey"> <li id="subjectName">JavaScript</li> <li id="teacherName"><a href="#">John Smith</a></li> <li id="subjectName">Java</li> <li id="teacherName"><a href="#">David Miller</a</li> <li id="subjectName">MongoDB</li> <li id="teacherName"><a href="#">Carol Taylor</a></li> </ul> <script> $("#searchTheKey").on('keyup', function(){ var value = $(this).val().toLowerCase(); $("#matchKey li").each(function () { if ($(this).text().toLowerCase().search(value) > -1) { $(this).show(); $(this).prev('.subjectName').last().show(); } else { $(this).hide(); } }); }) </script>Pero en el caso de asignar valor en el cuadro de entrada directamente, la función de búsqueda no funciona.
ejemplo: $(".txtInput").val("MongoDB"); ¿Hay alguna forma de resolver este problema, que esto debería funcionar en ambos casos?
Puede agregar .trigger("keyup") a su $(".txtInput").val("MongoDB")
Manifestación
$("#searchTheKey").on('keyup', function() { var value = $(this).val().toLowerCase(); $("#matchKey li").each(function() { if ($(this).text().toLowerCase().search(value) > -1) { $(this).show(); $(this).prev('.subjectName').last().show(); } else { $(this).hide(); } }); }) $(".mongo").click(function() { $(".txtInput").val("MongoDB").trigger("keyup") }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="txtInput" id="searchTheKey" placeholder="Enter the keywords to search....."> <ul id="matchKey"> <li id="subjectName">JavaScript</li> <li id="teacherName"><a href="#">John Smith</a></li> <li id="subjectName">Java</li> <li id="teacherName"><a href="#">David Miller</a></li> <li id="subjectName">MongoDB</li> <li id="teacherName"><a href="#">Carol Taylor</a></li> </ul> <button class="mongo">search for mongo</button>Fragmento relevante: $("#searchTheKey").on('keyup', function(){
Vincula su función en keyup, de esta manera no se ejecutará ya que cambiar el valor de entrada mediante programación no activa un evento keyup.
La forma más fácil sería usar .trigger('keyup') cuando cambia el valor de entrada, como lo sugiere Carsten.