0
158
Vistas¿Cómo truncar los resultados de la consulta con javascript?
Tengo una búsqueda de marca. Quiero que se muestre un ajuste en la vista de consulta. En la imagen de ejemplo a continuación, estoy buscando la marca Meto , por lo que muestro los resultados de búsqueda también bajo el nombre Meto . Quiero mostrar solo el primer carácter, si busco Meto , solo mostrará la letra M
¿Cómo hacer eso con javascript?
Mi plantilla
<div class="brands-list"> @for ((key, val): brandsByFirstChar) { <div class='brand-by-alphabet'> <h3 class='alphabet' id='alpha-@key'>@key</h3> <div class="row brand-collection-container"> <div class='col-sm-3 brand-collection'><ul> @for ((i, b): val) { <li><a href="/search?srp-brandIds=@b.getId()&srp-actionTrigger=BRAND&srp-brandMode=true">@b.getName()</a></li> @if ((i.index() % 1) == 0) { </ul> </div> <div class='col-sm-3 brand-collection'><ul> } } </ul> </div> </div> </div> } </div>mi js
$(document).on("keypress", "#store-searchText", function (e) { if (e.which == 13) { var inputVal = $(this).val(); window.location = location.href.replace(location.search, '') + "?q=" + inputVal } });1 Respuestas
Responde la pregunta0
Para una solución js, puede cambiar todo h3.alphabet para reemplazar solo el primer carácter.
El uso de la sobrecarga de .text con una devolución de llamada de función llama a .text con el texto de cada elemento por turno.
Sin embargo , obtendrá el FOUC (flash de contenido sin estilo) a medida que se carga la página y luego ejecuta su javascript; sería mejor cambiarlo del lado del servidor (en la plantilla)
$(function() { $(".brands-list h3.alphabet").text(function(i, txt) { return txt.substr(0, 1); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="brands-list"> <div class='brand-by-alphabet'> <h3 class='alphabet'>Bosch</h3> <div class="row brand-collection-container"> <div class='col-sm-3 brand-collection'> <ul> <li>Bosch</li> </ul> </div> </div> <h3 class='alphabet'>Metro</h3> <div class="row brand-collection-container"> <div class='col-sm-3 brand-collection'> <ul> <li>Metro</li> </ul> </div> </div> </div> </div>Alternativamente, si realizó una llamada ajax en lugar de recargar la página, podría interceptar el html y modificarlo antes de que se muestre.