SHARE
TWEET

Untitled

a guest Feb 21st, 2020 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  10.         integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  11.     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  12.         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  13.         crossorigin="anonymous"></script>
  14.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  15.         integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  16.         crossorigin="anonymous"></script>
  17.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  18.         integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  19.         crossorigin="anonymous"></script>
  20.  
  21.  
  22.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  23.     <script>
  24.         var array = ["Aceiutno",
  25.             "Aguacate",
  26.             "Coliflor",
  27.             "Castaña",
  28.             "Anchoa",
  29.             "Jamon",
  30.             "Jalapeño",
  31.             "Patata"];
  32.  
  33.         $(document).ready(function () {
  34.             var dataList = document.getElementById("list");
  35.             array.forEach(element => {
  36.                 var option = document.createElement("option");
  37.                 var values = document.createAttribute("value");
  38.                 dataList.append(option);
  39.                 values.textContent = element;
  40.                 option.setAttributeNode(values);
  41.             });
  42.             $("#busqueda").on("keyup", function () {
  43.                 var value = $(this).val().toLowerCase();
  44.                 $("#list").filter(function () {
  45.                     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  46.                 });
  47.             });
  48.         });
  49.  
  50.     </script>
  51.     <style>
  52.         input{
  53.             border-radius: 10px;
  54.         }
  55.     </style>
  56. </head>
  57.  
  58. <body>
  59. <div class="container">
  60.  <div class="jumbotron ">
  61.         <div class="container">
  62.           <h1 class="display-4">Búsqueda de alimentos</h1>
  63.         </div>
  64.       </div><br>
  65.       <input id="busqueda" list="list" type="text" placeholder="Introduce alimento">
  66.       <button type="button" class="btn btn-danger">Enviar</button>
  67.       <datalist id="list">
  68.  
  69.     </datalist>
  70.     </div>
  71.    
  72.  
  73.     <br>
  74.  
  75.    
  76. </div>
  77. </body>
  78.  
  79. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top