auto-complete code

This following html, javascript, and css code is used to build a basic auto-complete user interface. The next step will be to build the back-end server which will handle AJAX requests.

file:autocomplete.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/xml;charset=utf-8" />
    <title>auto-complete</title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <script type="text/javascript">
      m_i = -1;
      m_keyval = '';
      
      function showResult(keycode){
        oresult = document.getElementById('result');
        oresult.style.visibility = 'visible';
        otext = document.getElementById('tel_search');

        if (keycode =='40'){  // down
          if (m_i > 0){
            cancelHighlight('i'+m_i);
          }
          if (m_i < 5){
            m_i++;
          }
          else
          {
            m_i = 1;
          }
          highlight('i'+m_i);
        }
        if (keycode =='38'){  // up
          if (m_i > 0 || m_i < 6){
            cancelHighlight('i'+m_i);
          }
          m_i--;
          highlight('i'+m_i);
        }
        if (keycode =='27' || keycode == '39'){   // escape
          if (m_keyval != ''){
            otext.value = m_keyval;
            m_keyval = '';
          }
          hideResult();
          cancelHighlight('i'+m_i);
          m_i = 0;
        }
        if (keycode =='13'){    // enter
          itemText = getItem('i'+m_i);
          otext.value = itemText;
          m_keyval = itemText;
        }
      }
      function setTextValue(i){        
        otext = document.getElementById('tel_search');
        itemText = getItem('i'+i);
        otext.value = itemText;
        m_keyval = itemText;
        m_i = i;
      }
      
      function hideResult(){
        oresult = document.getElementById('result');
        oresult.style.visibility = 'hidden';
      }

      function getItem(id){
        oItem = document.getElementById(id);
        return oItem.innerHTML;
      }
            
      function highlight(id){
        oItem = document.getElementById(id);
        oItem.className = 'highlight';
        oItem.style.backgroundColor = '#789';
        oItem.style.color = '#ee8';
      }
      
      function cancelHighlight(id){
        oItem = document.getElementById(id);
        oItem.style.backgroundColor = '#de8';
        oItem.style.color = '#bbb';
      }
      
      function mHighlight(i){
        if (m_i > 0){
          cancelHighlight('i'+m_i);
        }
        highlight('i'+i);
      }
      
      function handleKeyword(keycode){
        if (!(m_i < 0 && keycode == 40) && keycode != 9 && keycode != 37 && !(m_i < 1 && keycode == 38) ) {
          showResult(keycode);
          if (m_i == -1) m_i = 0;
        }
        else {
          hideResult();
        }
      }
    </script>
  </head>
  <body onclick="hideResult();">
  <div id="search">
    <input type="text" id="tel_search" name="tel_search" onkeyup="handleKeyword(event.keyCode);"/>
    <p>dhtml is fun </p>
    <div id="result">
      <ul>
        <li id="i1" onmouseover="mHighlight(1);" onmouseout="cancelHighlight('i1');" onclick="setTextValue(1)">1erter</li>
        <li id="i2" onmouseover="mHighlight(2);" onmouseout="cancelHighlight('i2');" onclick="setTextValue(2)">2tttye</li>
        <li id="i3" onmouseover="mHighlight(3);" onmouseout="cancelHighlight('i3');" onclick="setTextValue(3)">3erter</li>
        <li id="i4" onmouseover="mHighlight(4);" onmouseout="cancelHighlight('i4');" onclick="setTextValue(4)">4tttye</li>
        <li id="i5" onmouseover="mHighlight(5);" onmouseout="cancelHighlight('i5');" onclick="setTextValue(5)">5erter</li>

      </ul>
    </div>
  </div>
  </body>
</html>

file: default.css

body {background-color: #e34;}
#search {background-color: #478; height: 4em;position: relative;}
#result {background-color: transparent; max-height: 8em; position: absolute;  overflow: hidden; z-index: 500;left:0; top:1.4em; visibility:hidden; width: 10.2em; padding:0; margin:0;}
#result ul {background-color: #9de; list-style-type: none; padding:0; margin: 0}
  #result li {background-color:#de8; color: #bbb; padding:0; margin: 0.2em}
    .highlight {background-color: #9ab; cursor: pointer}

Popular @ dzone.com

Related Tags

Never been to DZone Snippets before?

1st attempt at building an autocomplete dhtml user interface