Recherche JSsearch de type Taobao (tutoriel détaillé)

Cet article fournit une analyse approfondie de l'utilisation de JSsearch en imitant la façon dont Taobao recherche des mots-clés puis extrait les recherches de produits associées

Nous donnons d'abord le code source pertinent du programme JSsearch : https://gitee.com/skyogo/JSsearch

Nous téléchargeons la version JSsearch1.0 Community

Après l'avoir téléchargée, nous téléchargeons une page d'achat similaire à Taobao

Ensuite, lorsque nous ouvrirons cette page, nous trouverons quelque chose comme ceci

À ce moment-là, nous fermons la page et copions notre JSsearch.js dans le répertoire racine de la page Taobao Après avoir copié

sous le dossier js, on l'introduit dans la page html (on l'écrit en bas du corps)

<script src="js/JSsearch.js"></script>
<script>
</script>

Puis on l'ajoute à la ligne 76 ci-dessus (sous la balise d'entrée) et écrivons ce code

<p id="search-recommend">
 没有搜索结果
</p>

Ensuite, nous ouvrons le fichier css/index.css et écrivons cette feuille de style CSS

#search-recommend{
  height: 40px;
  width: 580px;
  position: absolute;
  top: 110px;
  border: 1px gray solid;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 11px;
  font-size: 15px;
  cursor: pointer;
  background: white;
}

Exécutons la page html et find Il y a une case supplémentaire sous le champ de recherche

À ce stade, notre code html et css est terminé. Ensuite, écrivons le code js

. Nous fermons maintenant la page, ouvrons les outils de développement et trouvons la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a à environ la ligne 2754 dans index.html, puis nous allons maintenant y écrire notre code de requête

Tout d'abord, nous écrivons ce code. : (obtenir à plusieurs reprises la valeur dans la zone de saisie)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

Ensuite, nous écrivons une déclaration de jugement sous var pour déterminer si la valeur de la zone de saisie a changé

if(lastValue != document.getElementById("search-in").value){          
}

Suivant , on écrit dans le if :

lastValue = document.getElementById("search-in").value;

Ce paragraphe signifie répéter le jugement. Si la valeur de la zone de saisie change, alors réaffecter la valeur

Ensuite, on écrit ci-dessous :

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

Ce paragraphe sert à juger que si la valeur actuelle de la zone de saisie est vide, alors laissez-la afficher "Aucun résultat de recherche"

Ensuite, nous dans else Il écrit :

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

À ce stade, nous avons appelé la méthode de recherche par mot-clé de JSsearch. Oh, au fait, nous n'avons pas encore écrit le tableau itemList

Pour le moment, déplacez le curseur sur la ligne ci-dessus. setInterval et écrivez :

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList est une collection de tous nos produits

Maintenant, déplacez le curseur en arrière, déplacez-le ailleurs et écrivez :

document.getElementById("search-recommend").innerHTML = newItemList[0];

At cette fois, si nous ouvrons à nouveau le fichier html et saisissons le contenu dans la zone de saisie, nous constaterons qu'il existe déjà une association !

Bien sûr, ce n'est qu'un prototype. Nous avons encore un BUG à résoudre, c'est-à-dire que lorsque vous saisissez un caractère contenu dans plusieurs chaînes, il ne le fera pas. Recommandez nécessairement celui que vous voulez. JSsearch y a déjà pensé pour nous. Je ne l'écrirai plus ici. Si vous souhaitez résoudre ce BUG, ​​vous pouvez vous référer à la documentation de JSsearch pour le résoudre vous-même !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Description détaillée de l'utilisation d'axios pour résoudre les problèmes de requête http dans vue2 (tutoriel détaillé)

En utilisant vue Quoi sont les méthodes pour introduire des graphiques highcharts dans le projet ?

Utilisation de @HostBinding() et @HostListener() dans Angular (tutoriel détaillé)

Comment gérer les problèmes d'affichage avant le rendu de la vue (Tutoriel détaillé)

En utilisant ueditor dans le projet vue (Tutoriel détaillé)

En introduisant le bureau à distance noVNC dans le projet vue Que sont les étapes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!