Javascript – Correction du système de recherche?

Vue d’ensemble

Tout d’abord, je n’ai aucune visibilité sur le

… gâchis le positionnement des cartes ou des boîtes …

comme je ne sais pas en quoi consiste votre CSS, j’ai simplement fait quelques suppositions à ce sujet. Je soupçonne que cela peut être dû au rendu réel de vos éléments en quelque sorte. Pour aider à cela, j’ai supprimé tous les CSS du balisage injecté, car l’injection de ces atsortingbuts de “style” n’est pas la meilleure pratique et franchement difficile à déboguer comme vous semblez l’avoir expérimenté. J’ai fait une tentative mais vous devrez ajuster le CSS que j’ai fourni car il ne contient tout simplement pas le vôtre.

Pour aider avec cela, j’ai simplement fait un “remplacer” avec la page actuelle plutôt que d’append à chaque fois et ensuite faire face au défi de la fin du défilement / début et faire face à la perturbation de la recherche de cela.

J’ai supprimé l’injection d’identifiant en double sur le bouton et utilisé à la place une injection de classe. Cela résoudra le problème du code HTML non valide, ce qui provoquerait des résultats inattendus qui seraient très difficiles à déboguer.

Le problème le plus difficile est la nature dynamic de votre tableau d’éléments lors de la recherche dans la liste d’objects sur la page. C’est ce que j’ai résolu en créant une “liste de candidats à la vue appelée currentSearch que j’ai pris la liberté d’append à un nom appelé myApp.data comme myApp.data.currentSearch .

En parlant de l’espace de noms, je l’ai fait pour éviter plusieurs objects globaux. Je l’ai également fait avec mes fonctions personnalisées en tant que meilleure pratique.

Voici mon exemple de balisage que j’ai utilisé:

CSS

Voici le CSS qui a été en grande partie extrait des propriétés de style. J’ai pris la liberté de les nommer mal comme classe de first-style-thing de second-style-thing etc., qui se coordonne simplement à la séquence d’éléments injectée. Cela présente également l’avantage de réduire la taille de la chaîne d’injection.

 .li-style-thing { padding: 8px; font-weight: bold; font-size: 13.5px; } .first-style-thing { margin: 0%; min-height: 295px; width: 245.438px; border-radius: 0px; height: 295px; box-shadow: inset 0px 0px 25px 2px #232323; border: 1px solid black; } .second-style-thing { text-decoration: underline; text-align: left; font-size: 14.5px; color: #E8E8E8; font-family: Roboto; position: relative; right: -3px; } .third-style-thing { text-align: left; color: #E8E8E8; font-family: Roboto; position: relative; left: 3px; } .fourth-style-thing { position: relative; padding: 0%; top: -33px; } .fifth-style-thing { position: relative; top: -129px; background: rgba(0, 0, 0, 0.15); display: block; height: 163px; } .sixth-style-thing { font-size: 22.5px; font-family: Arial Black; color: #E8E8E8; } .seventh-style-thing { font-weight: normal; font-size: 12px; font-family: Roboto; font: bold; } .eighth-style-thing { position: relative; left: -5px; top: 50px; } .ninth-style-thing { position: relative; right: -5px; top: 50px; } .btn { position: relative; display: block; height: 1.5em; width: 5em; color: cyan; background-color: blue; font-weight: bold; text-align: center; padding-top: 0.5em; margin: 1em; text-decoration: none; text-transform: uppercase; } #inventory { display: block; position: relative; top: 1em; left: 0em; border: solid lime 1px; } #inventory li { background-color: #888888; } #inventory li { display: inline-block; float: left; } .purchaseButton { right: -8em; top: 0; } #search { height: 4em; width: 100%; background-color: #00aaaa; padding: 1em; } 

Code:

À propos du code, notez l’object items que j’ai simplement fabriqué à partir du reverse engineering de votre code d’injection et qui doit probablement être ajusté aux propriétés de votre object.

Notez la fonction anti- debounce qui résout un problème dans lequel vous pourriez déclencher trop souvent les événements de molette de défilement / souris J’ai ajouté un “papillon” que vous pourriez utiliser à la place, emprunté ici: https://remysharp.com/2010/07/21/throttling-function-calls En parlant de, j’ai ajouté l’événement “wheel” au “scroll” de sorte que si vous êtes en haut / en bas du défilement, la molette de la souris peut également déclencher le défilement lorsque aucun défilement n’a lieu. Je n’ai pas abordé d’autres problèmes possibles tels que la flèche haut / bas lorsque le parchemin est en haut / en bas; Je vous laisse le soin de répondre à vos besoins.

Notez que lors d’un événement “search” lors de la frappe, je réinitialise la liste currentSearch .

J’ai laissé sur place un console.log que vous pouvez supprimer – mais vous permet de voir la page et une journalisation des événements déclenchés.

Voici un exemple pour que vous puissiez tout essayer https://jsfiddle.net/MarkSchultheiss/hgfhh2y7/3/

 var myApp = myApp || {}; myApp.data = { currentSearch: [], pageStart: 0, pageEnd: 0,ma perPage: 3, page: 0, lastScroll: 0, scrollDelay: 250, outputContainer: $('#inventory'), excludes: ['Operation Phoenix Case Key', 'CS:GO Case Key', 'Winter Offensive Case Key', 'Revolver Case Key', 'Operation Vanguard Case Key', 'Operation Wildfire Case Key', 'Shadow Case Key', 'Operation Breakout Case Key', 'Chroma Case Key', 'Huntsman Case Key', 'Falchion Case Key', 'Chroma 2 Case Key'] }; myApp.func = { contains: function(myArray, searchTerm, property) { var found = []; var len = myArray.length; for (var i = 0; i < len; i++) { if (myArray[i][property].toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) found.push(myArray[i]); } return found; }, paginate: function(items) { myApp.data.pageStart = myApp.data.perPage * myApp.data.page; myApp.data.pageEnd = myApp.data.pageStart + myApp.data.perPage; if (myApp.data.pageEnd > items.length) { myApp.data.pageEnd = items.length; myApp.data.pageStart = myApp.data.pageEnd - myApp.data.perPage >= 0 ? myApp.data.pageEnd - myApp.data.perPage : 0; } console.log("Page:" + myApp.data.page + " Start:" + myApp.data.pageStart + " End:" + myApp.data.pageEnd + " max:" + items.length); return items; }, debounce: function(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; }, throttle: function(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function() { var context = scope || this; var now = +new Date, args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function() { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } } }, renderItems: function(pageItems) { // $("#inventory").html(""); console.log('renderStart Items:' + pageItems.length); console.log(myApp.data.pageStart + ":" + myApp.data.pageEnd); var renderList = pageItems.filter(function(itemValue) { return !!(myApp.data.excludes.indexOf(itemValue) == -1) }).slice(myApp.data.pageStart, myApp.data.pageEnd); console.log(renderList); var newContent = ""; renderList.forEach(function(item, index, arr) { var message = 'BitSkins Price: $' + Math.round((item.bprice * 1)); if (item && item.price !== null) { if (item.bprice === '') { message = 'Item never sold on BitSkins!'; } if (myApp.data.excludes.indexOf(item.name) == -1) { newContent += "
" + item.name + "
" + item.condition + "
$" + Math.round(item.price) + "
" + message + "
InspectCart
"; } } myApp.data.outputContainer.html(newContent); }); } }; var items = [{ id: "123", name: "freddy Beer", condition: "worn", originalname: "beer stein", price: 10.22, bprice: "34.33", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "123", name: "freddy Beer", condition: "worn", originalname: "beer stein", price: 10.22, bprice: "34.33", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "123", name: "freddy Beer", condition: "worn", originalname: "beer stein", price: 10.22, bprice: "34.33", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "123", name: "freddy Beer", condition: "worn", originalname: "beer stein", price: 10.22, bprice: "34.33", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "123", name: "Operation Phoenix Case Key", condition: "worn", originalname: "Operation Phoenix Case Key", price: 10.22, bprice: "34.33", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "234", name: "Johnson Wax", condition: "waxy", originalname: "Ear wax", price: 2244.22, bprice: "", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "45245", name: "Door Knob | Green", condition: "green tint", originalname: "Green door knob", price: 35.68, bprice: "", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA", inspect: "http://example.com/myinspect/4" }, { id: "45245red", name: "Door Knob | Red", condition: "red tint", originalname: "Red door knob", price: 35.68, bprice: "", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA", inspect: "http://example.com/myinspect/4" }, { id: "45245red", name: "Door Knob | Red", condition: "red tint", originalname: "Red door knob", price: 35.68, bprice: "", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA", inspect: "http://example.com/myinspect/4" }, { id: "45245blue", name: "Door Knob | Blue", condition: "blue tint", originalname: "Blue door knob", price: 35.68, bprice: "", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA", inspect: "http://example.com/myinspect/4" }, { id: "45245Brown", name: "Door Knob | Brown", condition: "brown tint", originalname: "Brown door knob", price: 35.68, bprice: "34.23", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsQEl9Jg9SpIW1KgRrg6GGJWRBtI-ykYTak6WhN76JlWgFsJN1j72SotWiigbi-0BqYjuncdDDdRh-Pw9UqwY-SA", inspect: "http://example.com/myinspect/4" }, { id: "45245Malt", name: "Beer malt | Brown", condition: "brown tint", originalname: "Brown Beer Malt ", price: 35.68, bprice: "34.23", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }, { id: "4Beef", name: "Beefeaters Mug | Brown", condition: "new tint", originalname: "Brown Beefeaters mug", price: 35.68, bprice: "34.23", iconurl: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og", inspect: "http://example.com/myinspect/4" }]; myApp.data.outputContainer.on('customRenderEvent', function() { myApp.func.renderItems(myApp.func.paginate(myApp.data.currentSearch)); }); $('#SearchItemsFromList').on('keyup', function() { var valThis = $(this).val(); if (valThis === "") { // item-card // items hold the things to pageinate // currentSearch holds the filtered items myApp.data.currentSearch = items; } else { // "name" is the matching property in the object myApp.data.currentSearch = myApp.func.contains(items, valThis, "name"); } myApp.data.outputContainer.sortinggger('customRenderEvent'); console.log("keyup len:" + myApp.data.currentSearch.length); }).sortinggger('keyup'); // sortinggger for initial display $(window).on('scroll wheel', myApp.func.debounce(function(event) { // set the page on scroll up/down if ($(this).scrollTop() == 0) { myApp.data.page > 0 ? myApp.data.page-- : myApp.data.page = 0; } else { myApp.data.page++; } myApp.func.renderItems(myApp.func.paginate(myApp.data.currentSearch)); }, myApp.data.scrollDelay)); 

Note finale sur le code, vous avez une condition assez longue et difficile à maintenir que j’ai remplacée par l’ajout d’un tableau avec les exclusions, puis le code l’utilise avec un filtre: .filter(function(itemValue) { return !!(myApp.data.excludes.indexOf(itemValue) == -1) })