Autocomplete

by evgkch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="app"></div>

CSS

@font-face {
    font-family: 'Roboto'; /* give your font a name to reference it by later on! */
    src: url('https://fonts.googleapis.com/css?family=Roboto');
    /* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
body {
  font-family: 'Roboto', sans-serif;
  background-color: #252525;
}
.main {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  flex-flow: row nowrap;
  height: 40px;
}
.refresh {
  display: flex;
  align-items: center;
  background-color: blue;
  color: whitesmoke;
  padding: 5px;
  cursor: pointer;
}
.input {
  display: flex;
  height: 100%;
  flex-grow: 6;
}
input {
  width: 100%;
  border: none;
  border-bottom: solid 2px whitesmoke;
  outline: none;
  display: flex;
  padding: 5px;
}
.search-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    color: grey;
    cursor: pointer;
    padding: 5px;
}
.autocomplete {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}
.autocomplete-items {
  display: flex;
  flex-flow: column;
  position: absolute;
  width: 100%;
}
.autocomplete-item {
  display: flex;
  font-weight: bold;
  background-color: white;
  padding: 5px;
}
.autocomplete-item:hover {
  background-color: whitesmoke;
  cursor: default;
}
.autocomplete {
  font-weight: 300;
}
.result, .body {
  margin-top: 10px;
  padding: 5px;
  background-color: white;
}

Babel + JSX

//MVC-подход к React-разработке 

// Исходные данные для поиска и автозаполнения
const string = `Paul Adrien Maurice Dirac (8 August 1902 – 20 October 1984) was an English theoretical physicist who made fundamental contributions to the early development of both quantum mechanics and quantum electrodynamics. He was the Lucasian Professor of Mathematics at the University of Cambridge, a member of the Center for Theoretical Studies, University of Miami, and spent the last decade of his life at Florida State University.Among other discoveries, he formulated the Dirac equation which describes the behaviour of fermions and predicted the existence of antimatter. Dirac shared the 1933 Nobel Prize in Physics with Erwin Schrödinger "for the discovery of new productive forms of atomic theory".[5] He also made significant contributions to the reconciliation of general relativity with quantum mechanics.He was regarded by his friends and colleagues as unusual in character. Albert Einstein said of him "This balancing on the dizzying path between genius and madness is awful". He is regarded as one of the most significant physicists of the 20th century. Paul Adrien Maurice Dirac was born at his parents' home in Bristol, England, on 8 August 1902,[7] and grew up in the Bishopston area of the city.[8] His father, Charles Adrien Ladislas Dirac, was an immigrant from Saint-Maurice, Switzerland, who worked in Bristol as a French teacher. His mother, Florence Hannah Dirac, née Holten, the daughter of a ship's captain, was born in Cornwall, England, and worked as a librarian at the Bristol Central Library. Paul had a younger sister, Béatrice Isabelle Marguerite, known as Betty, and an older brother, Reginald Charles Félix, known as Felix,[9][10] who committed suicide in March 1925.[11] Dirac later recalled: "My parents were terribly distressed. I didn't know they cared so much [...] I never knew that parents were supposed to care for their children, but from then on I knew."[12] Charles...