Maison > interface Web > js tutoriel > Analyse approfondie de l'utilisation de la liste déroulante de recherche Imitation Taobao JSsearch

Analyse approfondie de l'utilisation de la liste déroulante de recherche Imitation Taobao JSsearch

小云云
Libérer: 2018-01-16 13:17:41
original
1415 Les gens l'ont consulté

Cet article analyse principalement l'utilisation de JSsearch en imitant les mots-clés de recherche Taobao, puis en déroulant les recherches de produits associées. Apprenons avec l'éditeur.

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

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

Après le téléchargement, nous téléchargeons une page d'achat similaire à Taobao

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

À ce stade, nous fermons la page et copions notre JSsearch.js dans le dossier js dans le répertoire racine de la page Taobao

Après la copie, nous l'introduisons dans la page html (dans Write at the bas du corps)


<script src="js/JSsearch.js"></script>
<script>
</script>
Copier après la connexion

Ensuite on écrit ce code à la ligne 76 ci-dessus (sous la balise input)


<p id="search-recommend">
 没有搜索结果
</p>
Copier après la connexion

Ensuite, nous ouvrons le fichier css/index.css et y é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;
}
Copier après la connexion

Exécutons la page html et trouvons que là est une case supplémentaire sous le champ de recherche

À ce stade, notre code html et css a été écrit Ensuite, écrivons le code js

Nous. fermez maintenant la page, ouvrez les outils de développement et recherchez la balise

Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal