JS Binsearch widget// source https://jsbin.com/rabiyaf

10/14/2018 - 9:22 PM

JS Bin search widget // source https://jsbin.com/rabiyaf

JS Bin

search widget

jsbin.rabiyaf.js

// ================================= Mock Server Start =============================

'use strict';

var FAILURE_COEFF = 10;
var MAX_SERVER_LATENCY = 200;

function getRandomBool(n) {
  var maxRandomCoeff = 1000;
  if (n > maxRandomCoeff) n = maxRandomCoeff;
  return Math.floor(Math.random() * maxRandomCoeff) % n === 0;
}

function getSuggestions(text) {
  var pre = 'pre';
  var post = 'post';
  var results = [];
  if (getRandomBool(2)) {
    results.push(pre + text);
  }
  if (getRandomBool(2)) {
    results.push(text);
  }
  if (getRandomBool(2)) {
    results.push(text + post);
  }
  if (getRandomBool(2)) {
    results.push(pre + text + post);
  }
  return new Promise(function (resolve, reject) {
    var randomTimeout = Math.random() * MAX_SERVER_LATENCY;
    setTimeout(function () {
      if (getRandomBool(FAILURE_COEFF)) {
        reject();
      } else {
        resolve(results);
      }
    }, randomTimeout);
  });
}
// ================================= Mock Server End =============================

var inputElem = document.querySelector('input');
var ulElem = document.querySelector('ul');
inputElem.addEventListener('keyup', function (e) {
  console.log(this.value);
  var searchVal = this.value;
  while (ulElem.firstChild) {
    ulElem.removeChild(ulElem.firstChild);
  }
  if (searchVal.length === 0) {
    ulElem.style.display = 'none';
    return;
  }
  getSuggestions(searchVal).then(function (response) {
    updateDropdown(response);
  }, function (response) {
    console.log("error");
    console.log(response);
    ulElem.style.display = 'none';
  });
});

function updateDropdown(response) {
  console.log(response);

  for (var i = 0; i < response.length; i++) {
    var liElem = document.createElement('li');
    liElem.innerHTML = response[i];
    ulElem.appendChild(liElem);
  }

  ulElem.style.display = 'block';
}

ulElem.addEventListener('click', function (e) {
  console.log(e.target.innerHTML);
  inputElem.value = e.target.innerHTML;
  ulElem.style.display = 'none';
  inputElem.focus();
});

jsbin.rabiyaf.css

.search {
  width: 400px;
}

input {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  font-size: 20px;
}

input:hover {
  border: 1px solid black;
}

input:focus {
  border: 1px solid black;
  background-color: #efefef;
}

section {
  position: relative;
}

ul {
  display: none;
  margin: 0;
  position: absolute;
  top: 40px;
  left: 0;
  list-style: none;
  padding:0;
  width: 400px;
}

li {
  padding: 10px 5px;
  height: 20px;
  background-color: #eee;
  border-radius: 2px;
}

li:hover {
  cursor: pointer;
  background-color: #bbb;
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="search widget">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.search {
  width: 400px;
}

input {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  font-size: 20px;
}

input:hover {
  border: 1px solid black;
}

input:focus {
  border: 1px solid black;
  background-color: #efefef;
}

section {
  position: relative;
}

ul {
  display: none;
  margin: 0;
  position: absolute;
  top: 40px;
  left: 0;
  list-style: none;
  padding:0;
  width: 400px;
}

li {
  padding: 10px 5px;
  height: 20px;
  background-color: #eee;
  border-radius: 2px;
}

li:hover {
  cursor: pointer;
  background-color: #bbb;
}
</style>
</head>
<body>
  <section>
    <div class='search'>
        <input />
    </div>
    <ul>
      
    </ul>
  </section>
<script id="jsbin-javascript">
// ================================= Mock Server Start =============================

'use strict';

var FAILURE_COEFF = 10;
var MAX_SERVER_LATENCY = 200;

function getRandomBool(n) {
  var maxRandomCoeff = 1000;
  if (n > maxRandomCoeff) n = maxRandomCoeff;
  return Math.floor(Math.random() * maxRandomCoeff) % n === 0;
}

function getSuggestions(text) {
  var pre = 'pre';
  var post = 'post';
  var results = [];
  if (getRandomBool(2)) {
    results.push(pre + text);
  }
  if (getRandomBool(2)) {
    results.push(text);
  }
  if (getRandomBool(2)) {
    results.push(text + post);
  }
  if (getRandomBool(2)) {
    results.push(pre + text + post);
  }
  return new Promise(function (resolve, reject) {
    var randomTimeout = Math.random() * MAX_SERVER_LATENCY;
    setTimeout(function () {
      if (getRandomBool(FAILURE_COEFF)) {
        reject();
      } else {
        resolve(results);
      }
    }, randomTimeout);
  });
}
// ================================= Mock Server End =============================

var inputElem = document.querySelector('input');
var ulElem = document.querySelector('ul');
inputElem.addEventListener('keyup', function (e) {
  console.log(this.value);
  var searchVal = this.value;
  while (ulElem.firstChild) {
    ulElem.removeChild(ulElem.firstChild);
  }
  if (searchVal.length === 0) {
    ulElem.style.display = 'none';
    return;
  }
  getSuggestions(searchVal).then(function (response) {
    updateDropdown(response);
  }, function (response) {
    console.log("error");
    console.log(response);
    ulElem.style.display = 'none';
  });
});

function updateDropdown(response) {
  console.log(response);

  for (var i = 0; i < response.length; i++) {
    var liElem = document.createElement('li');
    liElem.innerHTML = response[i];
    ulElem.appendChild(liElem);
  }

  ulElem.style.display = 'block';
}

ulElem.addEventListener('click', function (e) {
  console.log(e.target.innerHTML);
  inputElem.value = e.target.innerHTML;
  ulElem.style.display = 'none';
  inputElem.focus();
});
</script>


<script id="jsbin-source-css" type="text/css">.search {
  width: 400px;
}

input {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  font-size: 20px;
}

input:hover {
  border: 1px solid black;
}

input:focus {
  border: 1px solid black;
  background-color: #efefef;
}

section {
  position: relative;
}

ul {
  display: none;
  margin: 0;
  position: absolute;
  top: 40px;
  left: 0;
  list-style: none;
  padding:0;
  width: 400px;
}

li {
  padding: 10px 5px;
  height: 20px;
  background-color: #eee;
  border-radius: 2px;
}

li:hover {
  cursor: pointer;
  background-color: #bbb;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
// ================================= Mock Server Start =============================

var FAILURE_COEFF = 10;
var MAX_SERVER_LATENCY = 200;

function getRandomBool(n) {
  var maxRandomCoeff = 1000;
  if (n > maxRandomCoeff) n = maxRandomCoeff;
  return Math.floor(Math.random() * maxRandomCoeff) % n === 0;
}

function getSuggestions(text) {
  var pre = 'pre';
  var post = 'post';
  var results = [];
  if (getRandomBool(2)) {
    results.push(pre + text);
  }
  if (getRandomBool(2)) {
    results.push(text);
  }
  if (getRandomBool(2)) {
    results.push(text + post);
  }
  if (getRandomBool(2)) {
    results.push(pre + text + post);
  }
  return new Promise((resolve, reject) => {
    var randomTimeout = Math.random() * MAX_SERVER_LATENCY;
    setTimeout(() => {
      if (getRandomBool(FAILURE_COEFF)) {
        reject();
      } else {
        resolve(results);
      }
    }, randomTimeout);
  });
}
// ================================= Mock Server End =============================



const inputElem = document.querySelector('input');
const ulElem = document.querySelector('ul');
inputElem.addEventListener('keyup', function(e){
  console.log(this.value);
  var searchVal = this.value;
  while(ulElem.firstChild) {
      ulElem.removeChild(ulElem.firstChild);
  }
  if(searchVal.length === 0) {
    ulElem.style.display = 'none';
    return;
  }
    getSuggestions(searchVal).then(function(response){
      updateDropdown(response);
    }, function(response){
      console.log("error");
      console.log(response);
      ulElem.style.display = 'none';
    });
});

function updateDropdown(response){
  console.log(response);
  
  for(var i=0; i<response.length; i++) {
    var liElem = document.createElement('li');
    liElem.innerHTML = response[i];
    ulElem.appendChild(liElem);
  }
  
  ulElem.style.display = 'block';
}

ulElem.addEventListener('click', function(e){
  console.log(e.target.innerHTML);
  inputElem.value = e.target.innerHTML;
  ulElem.style.display = 'none';
  inputElem.focus();
});</script></body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS Bin search widget // source https://jsbin.com/rabiyaf