jQuery Bootstrap Auto Search, Auto Suggestion

Auto Search and Auto Suggestion built with jQuery and Bootstrap

by Shuaib Khan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<form action="" method="POST" id="formSubmit">
  <div class="form-group">
    <label for="usr">City:</label>
    <input type="text" name="city" class="form-control" id="cty" placeholder="Start Typing to search" autofill="false" autocomplete="off" required>
    <input type="hidden" name="id" id="hiddenId">
    <ul class='appendList' id="list"></ul>
  </div>
  <div class="form-group">
    <input type="submit" value="Submit" class="btn btn-primary">
  </div>
</form>
<div class="result">
    <pre></pre>
</div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
pre{
  background-color:#f1f1f1;
  border-radius:5px;
  border:1px solid #ccc;
  padding:10px 15px;
  display:none
}
body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.appendList{
  width:100%;
  max-height: 250px;
  overflow:hidden;
  border:1px solid #ccc;
  border-radius: 0 0 10px;
  overflow-y:scroll
}
.appendList li a{
  display: block;
  padding:10px 15px;
  border-bottom: 1px solid #ccc;
  font-size: 15px;
  cursor:pointer;
  
}
.appendList li a:hover{
  background-color: #f1f1f1;
}
.appendList li a:focus{
  background-color: #4374e0;
  color:#fff;
}

JavaScript

$("#cty").on("keyup", function(e){
  if(e.which != 38 && e.which != 40){
    var $_this = $(this);
    var filteredArray = city_names.filter(cn => {
      let lowerCaseCn = cn.toLowerCase();
      return lowerCaseCn.startsWith($_this.val().toLowerCase());
    });
    makeUl($_this, filteredArray);
  }else{
  	focus(e);
  }
	
})


function makeUl($_this, filteredArr){
	$(".appendList").empty();
  if($_this.val()){
    let list = "";
    $.each(filteredArr,(it=>{
      list+="<li data-attr-id='"+it+"'><a tabindex='1'>"+filteredArr[it]+"</a></li>";
    })
    );
    $(".appendList").append(list);
  }
}

$(".appendList").on("click", "li",function(e){
	let $_this = $(this);
	selectOption($_this);
});


function selectOption($_this){
	let thisTxt = $_this.text();
  let thisAttr = $_this.attr("data-attr-id");
  $("#cty").val(thisTxt);
  $("#hiddenId").val(thisAttr);
  $(".appendList").empty();
}


$("#formSubmit").submit(function(e){
  e.preventDefault();
  let formsValue = $('#formSubmit').serializeArray();
  //let formsValueSplit = formsValue.split("&");
  var data = {};
$(formsValue).each(function(index, obj){
    data[obj.name] = obj.value;
});
  //let formsValueReplace = formsValueSplit.replace("=",'":"')
  let prettyAns = JSON.stringify(data,null,2);
  $(".result pre").show().text(prettyAns)
})



$("#list").on("keyup", "li",function(e){
  if(e.which == 13){
    let $_this = $(this);
    selectOption($_this)
    return;
  }
  focus(e);
})


function focus(e){
var list = document.getElementById('list'); // targets the <ul>
var first; // targets the first <li>
var maininput = document.getElementById('cty');  // targets the input, which triggers the functions populating the list
switch (e.keyCode) {
  case 38: // if the UP key is pressed
          first = list.firstChild;
            if (document.activeElement == (maininput || first)) { break; } // stop the script if the focus is on the input or first element
            else {...