Autocomplete Dropdown Lookup List with Bells and Whistles

autocomplete-dropdown-lookup-list-with-bells-and-whistles.markdown

Autocomplete Dropdown Lookup List with Bells and Whistles

Been planning and saving up to finally ship the perfect autocomplete control with all the makings? This here is the best one north of the intergallactic boundary. It looks up values from a list as the user starts typing. The nice thing is that it looks up 'Starts With' as well as 'Contains' ...which I believe is sweet in some applications. Enjoy and share | Sander

A Pen by Sander (Sandroid) on CodePen.

License.

index.html

<h1 class="title">Autocomplete with Dropdown List Lookup<br>
*** TYPE SLOWLY ***</h3>
<h1 class="subtitle">Suggested list contains random technology terms.</h1>
<input type="text" id="searchBox" 
class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>

script.js

/*
     SANDER SAYS...
     NO WARRANTIES EXPRESSED OR IMPLIED
     FOR USING THIS CODE. ALL THIS HAS
     HAPPENED BEFORE, AND IT WILL HAPPEN
     AGAIN... BUT IT DOESN'T MATTER...
     BECAUSE WE ARE IN THIS TOGETHER.
     C'EST LA VIE. EVERYTHING COULD
     HAVE BEEN ANYTHING ELSE, AND IT
     WOULD HAVE JUST AS MUCH MEANING.
     ENJOY. COMPLIMENTS? PARTY
     INVITATIONS? RIGHT ON!
*/


var searchIndex = ["123? Really? Stop that!","404 Error","Address Bar","Ajax","Apache","Autoresponder","BitTorrent","Blog","Bookmark","Bot","Broadband","Captcha","Certificate","Client","Cloud","Cloud Computing","CMS","Cookie","CSS","Cyberspace","Denial of Service","DHCP","Dial-up","DNS Record","Domain Name","Download","E-mail","Facebook","FiOS","Firewall","FTP","Gateway","Google","Google Drive","Gopher","Hashtag","Hit","Home Page","HTML","HTTP","HTTPS","Hyperlink","Hypertext","ICANN","Inbox","Internet","InterNIC","IP","IP Address","IPv4","IPv6","IRC","iSCSI","ISDN","ISP","JavaScript","jQuery","Meta Search Engine","Meta Tag","Minisite","Mirror","Name Server","Packet","Page View","Payload","Phishing","POP3","Protocol","Scraping","Search Engine","Social Networking","Socket","Spam","Spider","Spoofing","SSH","SSL","Static Website","Twitter","USB","WTF, seriously!?! @#$%","XHTML"];

var input = document.getElementById("searchBox"),
    ul = document.getElementById("searchResults"),
    inputTerms, termsArray, prefix, terms, results, sortedResults;


var search = function() {
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length -1].toLowerCase();
  
  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
        t = a.indexOf(terms);
    
    if (t > -1) {
      results.push(a);
    }
  }
  
  evaluateResults();
};

var evaluateResults = function() {
  if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
    sortedResults = results.sort(sortResults);
    appendResults();
  } 
  else if (inputTerms.length > 0 && terms.length !== 0) {
    ul.innerHTML = '<li>No technoloigy terms containing <strong>' 
      + inputTerms 
      + '</strong> found.</li>';
/* Sander's comment: optionally insert this string before the </li> above:
<br><small><a href="https://google.com/search?q=' 
      + encodeURIComponent(inputTerms) + '" target="_blank">Try Google?</a></small>
*/
  }
  else if (inputTerms.length !== 0 && terms.length === 0) {
    return;
  }
  else {
    clearResults();
  }
};

var sortResults = function (a,b) {
  if (a.indexOf(terms) < b.indexOf(terms)) return -1;
  if (a.indexOf(terms) > b.indexOf(terms)) return 1;
  return 0;
}

var appendResults = function () {
  clearResults();
  
  for (var i=0; i < sortedResults.length && i < 5; i++) {
    var li = document.createElement("li"),
        result = prefix 
          + sortedResults[i].toLowerCase().replace(terms, '<strong>' 
          + terms 
          +'</strong>');
    
    li.innerHTML = result;
    ul.appendChild(li);
  }
  
  if ( ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

var clearResults = function() {
  ul.className = "term-list hidden";
  ul.innerHTML = '';
};
  
input.addEventListener("keyup", search, false);


social("codepen/UXauthority",
     "light", "Sander says... Respect the code, dawg.");

scripts

<script src="https://codepen.io/Sander-Nizni/pen/mPoOjg"></script>

style.sass

@import compass

@import compass
  
// Variables
$padding: 10px
$gfont: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif
$fw-normal: 400
$fw-heavy: 700

%radius
  +border-radius(3px)

body
  text-align: center
  background: #999
    
.title
  width: 100%
  margin: 3em 0 1em
  text-align: center
  font-family: $gfont
  font-size: 170%
  font-weight: $fw-normal
  color: #fff

.subtitle
  width: 100%
  margin: 0em 0 1em
  text-align: center
  font-family: $gfont
  font-size: 95%
  font-weight: $fw-normal
  color: #fff
  
.search-field
  display: block
  width: 30%
  margin: 1em auto 0
  padding: .5em $padding
  border: 1px solid #999
  font-size: 130%
  font-family: $gfont
  font-weight: $fw-normal
  color: #3e8ce0
  @extend %radius
    
.term-list
  list-style: none inside
  width: 30%
  margin: 0 auto 2em
  padding: #{$padding / 2} $padding 0
  text-align: left
  color: #777
  background: #fff
  border: 1px solid 
  font-family: $gfont
  font-weight: $fw-normal
  @extend %radius
  li
    padding: .5em 0
    border-bottom: 1px solid #eee
  strong
    color: #444
    font-weight: $fw-heavy

.hidden
  display: none