Maison > développement back-end > tutoriel php > Explication détaillée d'exemples d'imitation du contenu déroulant des requêtes Baidu à l'aide de PHP et Ajax

Explication détaillée d'exemples d'imitation du contenu déroulant des requêtes Baidu à l'aide de PHP et Ajax

黄舟
Libérer: 2023-03-16 18:06:01
original
1410 Les gens l'ont consulté

Exemple détaillé d'utilisation de PHP et Ajax pour imiter le contenu déroulant des requêtes Baidu

L'effet courant est le suivant :

code html :


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

  <style type="text/css">

    body{

      margin:0;

      padding: 0;

    }

    form{

      width: 500px;

      margin:40px auto;

    }

    .search-wrap{

      position: relative;

    }

    li{

      padding: 0;

      padding-left: 10px;

      list-style: none;

    }

    li:hover{

      background-color: #ccc;

      color: #fff;

      cursor: pointer;

    }

    #xiala{

      position: absolute;

      top: 40px;

      left: 0;

      background-color: #c2c2c2;

      width: 200px;

      margin:0;

      padding: 0 ;

      display: none;

    }

  </style>

</head>

<body>

  <form action="">

    <p class="search-wrap">

      <input type="text" id="search">

      <ul id="xiala">

      </ul>

      <input type="button" value="go" id="sousuo">

      <p id="searVal" style="display:inline-block;border:1px solid #ccc"></p>

    </p>

  </form>

</body>

<script type="text/javascript">

  var search=$("#search");

  search.on("input",function(){  //输入框内容改变发请求

    $.ajax({

      url:&#39;a.txt&#39;,

      type:&#39;GET&#39;,

      async:true,

      data:{value:$("#search").val()},

      success:function(data){

        var arr=data.split(&#39;,&#39;);

        console.log(arr);

        $("#xiala").html("");

        $.each(arr,function(i,n){

          var oLi=$("<li>"+arr[i]+"</li>");

          $("#xiala").append(oLi);

          $("#xiala").css("display","block");

        })

      }

    });

    $("#xiala").css("display","block");       //内容改变下拉框显示

    $("#searVal").html(search.val())

  })

  function stopPropagation(e) {

    if (e.stopPropagation){

       e.stopPropagation();

    }else{

     e.cancelBubble = true;

    }

  }

  $(document).on(&#39;click&#39;,function(){     //点击页面的时候下拉框隐藏

    $("#xiala").css("display","none");

  });

  $(document).on("click","#xiala li",function(){ //点击下拉框选项的时候改变输入框的值

    search.val($(this).text());

    $("#searVal").html($(this).text());

    $("#xiala").css("display","none");

  })

</script>

</html>

Copier après la connexion

contenu a.txt :


1

a,b,c,d,e,f,g

Copier après la connexion

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal