Advertisement
Guest User

Untitled

a guest
Feb 21st, 2020
145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.06 KB | None | 0 0
  1. Diseño de Interfaces Web
  2. Fecha de entrega: Hoy
  3. Práctica Entregable 7
  4. 1 punto
  5.  
  6. Sergio de Mingo Gil
  7. 6 feb.
  8.  
  9. practica-entregable-7
  10. Documentos de Google
  11. Tu trabajo
  12. Tarea entregada
  13.  
  14. busqueda.png
  15. Imagen
  16.  
  17. index.htm
  18. HTML
  19. Comentarios privados
  20.  
  21.  
  22. Práctica Entregable 7
  23. <!DOCTYPE html>
  24. <html lang="en">
  25.  
  26. <head>
  27. <meta charset="UTF-8">
  28. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  30. <title>Document</title>
  31. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  32. integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  33. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  34. integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  35. crossorigin="anonymous"></script>
  36. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  37. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  38. crossorigin="anonymous"></script>
  39. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  40. integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  41. crossorigin="anonymous"></script>
  42.  
  43.  
  44. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  45. <script>
  46. var array = ["Angel",
  47. "Antonio",
  48. "Carlos",
  49. "Carlita",
  50. "Alvaro",
  51. "Jorge",
  52. "Jonathan"];
  53.  
  54. $(document).ready(function () {
  55. var dataList = document.getElementById("list");
  56. array.forEach(element => {
  57. var option = document.createElement("option");
  58. var values = document.createAttribute("value");
  59. dataList.append(option);
  60. values.textContent = element;
  61. option.setAttributeNode(values);
  62. });
  63. $("#busqueda").on("keyup", function () {
  64. var value = $(this).val().toLowerCase();
  65. $("#list").filter(function () {
  66. $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  67. });
  68. });
  69. });
  70.  
  71. </script>
  72. <style>
  73. input{
  74. border-radius: 2px;
  75. }
  76. </style>
  77. </head>
  78.  
  79. <body>
  80. <div class="container">
  81. <div class="jumbotron ">
  82. <div class="container">
  83. <h1 class="display-4">Prueba de búsqueda</h1>
  84. <div class="alert alert-danger" role="alert">
  85. Prueba entregable de interfaces:
  86. </div>
  87. </div>
  88. </div><br>
  89. <input id="busqueda" list="list" type="text" placeholder="Introduce nombre">
  90. <button type="button" class="btn btn-success">Enviar</button>
  91. <datalist id="list">
  92.  
  93. </datalist>
  94. </div>
  95.  
  96.  
  97. <br>
  98.  
  99.  
  100. </div>
  101. </body>
  102.  
  103. </html>
  104. index.htm
  105. Mostrando index.htm.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement