Predictive Typing

In this example below you will see how to do a Predictive Typing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rcmeisty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rcmeisty ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <input class="form-control" placeholder="Search for a Latin or English word.." id="search">
<table>
  <tr><th>English Word</th><th>Latin Word</th></tr>
  <tbody id="wordsInsert">
  </tbody>
</table>
<button class="btn btn-primary" id="addTermDivButton">Add a term</button>
<button class="btn btn-warning" id="seeAllTerms">See all Terms in Database</button>
<div id="addTermDiv">
  <h4>Insert a new term</h4>
  <div class="col-md-2">
    <p>English Term</p>
    <input id="englishTermInput"/>
  </div>
  <div class="col-md-2">
    <p>Latin Term</p>
    <input id="latinTermInput">
  </div>
  <div class="col-md-2">
    <button id="addTerm" class="btn btn-primary">Add term to database</button>
  </div>
</div>
  
</div>

<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>

/*Downloaded from https://www.codeseek.co/rcmeisty/predictive-typing-QrmvXM */
    th, td{
  padding:2%;
  width:25%;
  margin:5%;
}

#addTerm{
  margin-top:10%;
}


/*Downloaded from https://www.codeseek.co/rcmeisty/predictive-typing-QrmvXM */
    // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAlnzwZXd9SqG7_Yg2zyV4qmWW9HrEHCfs",
    authDomain: "latin-dictionary-b97bf.firebaseapp.com",
    databaseURL: "https://latin-dictionary-b97bf.firebaseio.com",
    projectId: "latin-dictionary-b97bf",
    storageBucket: "latin-dictionary-b97bf.appspot.com",
    messagingSenderId: "328041028478"
  };
  firebase.initializeApp(config);

var dbReference = firebase.database().ref();
dbReference.on("value", gotTerms);

var allTerms;
function gotTerms(results){
  allTerms = results.val();
  console.log(allTerms);
  return allTerms;
}
var searchText;
var refWordE;
var refWordL;
var termsToWrite = "";
var searchTextLength;
$("#search").keyup(function(){
  searchText = $("#search").val();
  console.log(searchText.toLowerCase());
  var i;
  searchTextLength = searchText.length;
  for(i=0;i<allTerms.length;i++){
    refWordE = allTerms[i].englishWord;
    refWordE = refWordE.substr(0,searchTextLength);
    refWordL = allTerms[i].latinWord;
    refWordL = refWordL.substr(0,searchTextLength);
    if(refWordE==searchText){
      $("#wordsInsert").html("<tr><td>"+allTerms[i].englishWord+"</td><td>"+allTerms[i].latinWord+"</td></tr>");
    }
    if(refWordL==searchText){
      $("#wordsInsert").html("<tr><td>"+allTerms[i].englishWord+"</td><td>"+allTerms[i].latinWord+"</td></tr>");
    }
    if(searchText==""){
      $("#wordsInsert").html("<tr></tr>");
    }
  }
});
$("#seeAllTerms").click(function(){
  var allTermsToPrint = "";
  var t;
  for(t=0;t<allTerms.length;t++){
    allTermsToPrint = allTermsToPrint + "<tr><td>" + allTerms[t].englishWord + "</td><td>" + allTerms[t].latinWord + "</td></tr>";
  }
  $("#wordsInsert").html(allTermsToPrint);
})
var showing = 0;
function showFunction(){
  if(showing===0){
    $("#addTermDiv").hide();
    showing=1;
  }else{
    $("#addTermDiv").show();
    showing=0;
  }
}
$("#addTermDiv").hide();
$("#addTermDivButton").click(function(){
  showFunction();
});

var latinTermInput;
var englishTermInput;

$("#addTerm").click(function(){
  latinTermInput = $("#latinTermInput").val();
  englishTermInput = $("#englishTermInput").val();
  firebase.database().ref('/'+allTerms.length).set({
    englishWord: englishTermInput,
    latinWord: latinTermInput
  });
  $("#englishTermInput").val('');
  $("#latinTermInput").val('')
})

Comments