SHARE
TWEET

Untitled

a guest Jul 17th, 2017 42 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  10.    <link rel="stylesheet" type="text/css" href="style.css">
  11. </head>
  12. <body>
  13.  
  14.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  15.  
  16.     var ZOO;
  17.     $(function(){
  18.        
  19.         $.ajax({
  20.             url:'test_ajax.php',
  21.             type:'GET',
  22.             success: function(data){
  23.                 ZOO = parse(data);
  24.             }
  25.         })
  26.     });
  27.     var Animals = React.createClass({
  28.             render: function() {
  29.                 return (
  30.                     <li className ="animal">
  31.                             <div>
  32.                                 <div> {this.props.types} </div>
  33.                                 <div> {this.props.name} </div>
  34.                             </div>
  35.                     </li>
  36.                 )
  37.             };
  38.         });
  39.         var AnimalsList = React.createClass({
  40.             getInitialState: function() {
  41.                 return {
  42.                     displayedAnimals: ZOO
  43.                 };
  44.             },
  45.             handleSearch: function(event) {
  46.                 var searchQuery = event.target.value.toLowerCase();
  47.                 var displayedAnimals = ZOO.filter(function(el) {
  48.                     var searchValue = el.name.toLowerCase();
  49.                     var searchQuery1 = el.types.toLowerCase();
  50.                     return searchValue.indexOf(searchQuery) !== -1 || searchQuery1.indexOf(searchQuery) !== -1;
  51.                 });
  52.                 this.setState({
  53.                     displayedAnimals: displayedAnimals
  54.                 });
  55.             },
  56.             render: function() {
  57.                 return (
  58.                     <div className="ZOO">
  59.                         <input type="text" placeholder="Name Search" className="search-field" onChange={this.handleSearch} />
  60.                         <ul className="animal-list">
  61.                             {
  62.                                this.state.displayedContacts.map(function(el) {
  63.                                     return <Animal
  64.                                         key={el.id}
  65.                                         types={el.types}
  66.                                         name={el.name}
  67.                                     />;
  68.                                })
  69.                             }
  70.                         </ul>
  71.                     </div>
  72.                 );
  73.             }
  74.         });
  75.         ReactDOM.render(
  76.             <AnimalsList />,
  77.             document.getElementById("content")
  78.         );
  79.  
  80.     </script>
  81.     <!--<form action=""><input type="search" id="search-text"> <input type="submit"></form> -->
  82. </body>
  83.  
  84. </html>
RAW Paste Data
Top