0

buenas tengo que hacer un proyecto usando javascrip la libreria react js y html.

el proyecto consiste en hacer un barra de búsqueda que auto completa lo que voy escribiendo, esto lo hace usando un api y todo esto se encuentra dentro de un modal. ya el modal y la barra de búsqueda las tengo hechas, al igual que el código que busca la información en el api, pero por alguna razón no estoy recibiendo nada cunado hago imput en la barra de búsqueda el código es el siguiente:

javascript :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';





function autocompletado(){
document.getElementById("nameR").innerHTML = '';
document.getElementById("usernameR").innerHTML = '';
document.getElementById("emailR").innerHTML = '';
document.getElementById("addressR").innerHTML = '';
document.getElementById("phoneR").innerHTML = '';
document.getElementById("companyR").innerHTML = '';
document.getElementById("websiteR").innerHTML = '';

var UserArray = [];

var j ;

const url = '/users';
fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  for (j=0;j<data.length;j++) {
    var temporal = [];
    temporal[0] = `${data[j].name} `
    temporal[1] = `${data[j].username} `
    temporal[2] = `${data[j].email} `
    temporal[3] = `${data[j].address} `
    temporal[4] = `${data[j].phone} }`
    temporal[5] = `${data[j].company} `
    temporal[6] = `${data[j].website} `

    UserArray[j] = temporal;
  };  
})
.catch(function(error) {
  console.log(JSON.stringify(error));
}); 

 var pal = document.getElementById("myInput").value;
 var tam = pal.length;
 for (var i = 0; i < UserArray.length; i++) {
    var nombre = UserArray[i][0];
    var str = nombre.substring(0,tam);

    if (pal.length <= nombre.length && pal.length != 0 && nombre.length != 0) {
      if (pal.toLowerCase() == str.toLowerCase()) {
        var node = document.createElement("LI");
        var textnode = document.createTextNode(UserArray[i][0]);
        node.appendChild(textnode);
        document.getElementById("nameR").appendChild(node);
      }else {
      alert('no')
    }

    } 
   }
 }


class App extends Component {
  render() {
    return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
      <h2>Basic Modal </h2>



    </p>




  </div>

    );
  }
}



export default App;

y este es el codigo de html en el que tengo la barra de busqueda y el modal programados:

<!doctype html>
<html lang="en">
 <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>

 <style> 
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 150%;
}

input[type=text]:focus {
width: 100%;
}
</style>


</head>

<body> 

<div id="root"></div>

<div class="container">

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Note  </h4>
      </div>

      <div class="modal-body">
        <h5 class="modal-title">New Note </h5>
        <input type="text" id="myInput" name="search" onkeyup="autocompletado()" placeholder="Search.." title="Type in a name">

        <table id="myTable">
            <tr class="header">
              <th style="width:10%;">Name</th>
              <th style="width:10%;">Username</th>
              <th style="width:10%;">Email</th>
              <th style="width:10%;">Address</th>
              <th style="width:10%;">Phone</th>
              <th style="width:10%;">Company</th>
              <th style="width:10%;">Website</th>
            </tr>

              <tr >
                <td  id = "nameR"></td>
                <td  id = "usernameR"></td>
                <td  id = "emailR"></td>
                <td  id = "addressR"></td>
                <td  id = "phoneR"></td>
                <td  id = "companyR"></td>
                <td  id = "websiteR"></td>
              <tr>



          </table>
         <ul id="author2s"></ul>
      </div>
      <div class="modal-footer">
        Import: <input type="checkbox" id="myCheck">
        <button type="button" class="btn btn-default" data-dismiss="modal">Add Note</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">cancelar</button>
    </div>

  </div>
</div>

<script>
     $(document).ready(function(){
   $("#myBtn").click(function(){
      $("#myModal").modal();
      console.log("funciona");
    });
 });
</script>


  </body>
</html>

PD: los últimos dos bloques de código son uno solo no se por que no peudo ponerlos en un mismo bloque

el código corre bien, como dije anteriormente cuando hago el imput en la barra de búsqueda no hace nada, intente poniendo otros códigos de barras de búsqueda en el javascript y lo que puede concluir es que no estoy recibiendo el imput de la barra para poder hacer las búsquedas necesarias para completar la informacion

2
  • ¿La búsqueda se hace en consultando a una API o buscando en el array?
    – gugadev
    el 4 feb. 2017 a las 23:17
  • lo paso a un array para que sea mas facil de manejar pero no ahce diferencia si uso el appi o un arry en el proyecto
    – lewa14
    el 4 feb. 2017 a las 23:30

1 respuesta 1

0

Analizando tu código veo algunas cosas raras. Por ejemplo:

  • Tienes el código HTML en el archivo .html. Si usas React este código debería estar dentro de un componente, para ser usado cuando se requiera (reutilización).
  • No usas estado. Al no usar un estado en React pierdes toda lo que te brinda el framework. Es como usar JavaScript puro.
  • Obtienes los datos de la API fuera del componente. Malo, porque no te asegrua que al ser montado en componente, los datos obtenidos estén disponibles.
  • Haces muchas cosas para buscar por nombre, cuando lo único que necesitas es filtrar el array de usuarios para obtener aquellos cuyo nombre contiene la cadena ingresada en el input de búsqueda.

Cómo obtener datos

La forma en cómo obtienes los datos es errónea. En React, los datos obtenidos por AJAX se deben estar en la función especial componentDidMount, y, acto seguido, se debe actualizar el estado del componente lo que hará que la función render sea ejecutada, manteniendo así la UI siempre sincronizada.

Cómo escribir un componente

Como ya te he dicho, los componentes de React deben contener el código HTML a mostrar. Un componente, por normal general, es reusable siempre que se busque un cajo acoplamiento entre funcionalidades. Por ejemplo, una modal puede ser reusable si pasas los datos desde fuera del componente (como propiedades e hijos), lo que te evita escribir el mismo componente para cada modal que tengas.

Aquí un ejemplo "Reactizado" de tu código actual:

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      users: [],
      filteredUsers: []
    };
  }

  /**
   * Aquí haces tu consulta a la API
   * y obtienes los usuarios
   */
  componentDidMount () {
    fetch('/users')
      .then((resp) => resp.json())
      .then((users) => {
        this.setState({ users });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render () {
    return (
      <div className="modal">
        ...
        <input type="search" id="myInput" placeholder="Search user by name" onChange={this.search.bind(this)} />
        ...
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Username</th>
              <th>Email</th>
              <th>Address</th>
              <th>Phone</th>
              <th>Company</th>
              <th>website</th>
            </tr>
          </thead>
          <tbody>
          {
            this.state.filteredUsers.map((user) => (
              <tr>
                <td>{user.name}</td>
                <td>{user.username}</td>
                <td>{user.email}</td>
                <td>{user.address}</td>
                <td>{user.phone}</td>
                <td>{user.company}</td>
                <td>{user.website}</td>
              </tr>
            ))
          }
          </tbody>
        </table>
      </div>
    )
  }

  /**
   * Busca en el array de usuarios
   */
  search (e) {
    let value = e.target.value;
    // hace un filtrado del array de usuarios para obtener
    // aquellos cuyo nombre contiene lo ingresado en el input
    let filteredUsers = this.state.users.filter((user) => {
      return user.name.includes(value);
    });
    // actualiza el estado y por ende, la tabla
    this.setState({
      filteredUsers
    });
  }
}
7
  • y con respecto al html todo esta bien ahi o me equivoque en algo tambien ?
    – lewa14
    el 4 feb. 2017 a las 23:46
  • El HTML es válido, pero debe estar dentro de los componentes React. De hecho, es normal que solo haya un <div id="app"></div> en el HTML que es donde se monta la app.
    – gugadev
    el 4 feb. 2017 a las 23:55
  • pero si uso el codigo que me proporcionaste con el html que cree podre ver lso resultados que busco, y en dado caso de solo poner <div id="app"></div> donde pondria el modal y la barra de busqueda
    – lewa14
    el 5 feb. 2017 a las 0:00
  • Dentro del componente React. Si te fijas, en el código que puse, en el render está la modal, pero no he puesto todo el código de tu modal por cuestión de simplicidad. Toda aplicación React tiene un punto de entrada que es donde se monta el componente principal. Como en tu caso solo tienes uno, App, debes montarlo en #app: ReactDOM.render(<App/>, document.getElementById('app'));
    – gugadev
    el 5 feb. 2017 a las 0:03
  • no me quedo muy claro eso ultimo esa linea de código donde debiera ponerla para que el app corra bien
    – lewa14
    el 5 feb. 2017 a las 0:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.