DZone Snippets: auto-complete code http://snippets.dzone.com/posts Sun, 12 Oct 2008 01:29:08 GMT DZone Snippets: auto-complete code 1st attempt at building an autocomplete dhtml user interface http://snippets.dzone.com/posts/show/4990 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. <br /> <br />file:autocomplete.html <br /><code> <br /><?xml version="1.0" encoding="UTF-8"?> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <br /> <head> <br /> <meta http-equiv="Content-Type" content="text/xml;charset=utf-8" /> <br /> <title>auto-complete</title> <br /> <link rel="stylesheet" type="text/css" href="default.css"/> <br /> <script type="text/javascript"> <br /> m_i = -1; <br /> m_keyval = ''; <br /> <br /> function showResult(keycode){ <br /> oresult = document.getElementById('result'); <br /> oresult.style.visibility = 'visible'; <br /> otext = document.getElementById('tel_search'); <br /> <br /> if (keycode =='40'){ // down <br /> if (m_i > 0){ <br /> cancelHighlight('i'+m_i); <br /> } <br /> if (m_i < 5){ <br /> m_i++; <br /> } <br /> else <br /> { <br /> m_i = 1; <br /> } <br /> highlight('i'+m_i); <br /> } <br /> if (keycode =='38'){ // up <br /> if (m_i > 0 || m_i < 6){ <br /> cancelHighlight('i'+m_i); <br /> } <br /> m_i--; <br /> highlight('i'+m_i); <br /> } <br /> if (keycode =='27' || keycode == '39'){ // escape <br /> if (m_keyval != ''){ <br /> otext.value = m_keyval; <br /> m_keyval = ''; <br /> } <br /> hideResult(); <br /> cancelHighlight('i'+m_i); <br /> m_i = 0; <br /> } <br /> if (keycode =='13'){ // enter <br /> itemText = getItem('i'+m_i); <br /> otext.value = itemText; <br /> m_keyval = itemText; <br /> } <br /> } <br /> function setTextValue(i){ <br /> otext = document.getElementById('tel_search'); <br /> itemText = getItem('i'+i); <br /> otext.value = itemText; <br /> m_keyval = itemText; <br /> m_i = i; <br /> } <br /> <br /> function hideResult(){ <br /> oresult = document.getElementById('result'); <br /> oresult.style.visibility = 'hidden'; <br /> } <br /> <br /> function getItem(id){ <br /> oItem = document.getElementById(id); <br /> return oItem.innerHTML; <br /> } <br /> <br /> function highlight(id){ <br /> oItem = document.getElementById(id); <br /> oItem.className = 'highlight'; <br /> oItem.style.backgroundColor = '#789'; <br /> oItem.style.color = '#ee8'; <br /> } <br /> <br /> function cancelHighlight(id){ <br /> oItem = document.getElementById(id); <br /> oItem.style.backgroundColor = '#de8'; <br /> oItem.style.color = '#bbb'; <br /> } <br /> <br /> function mHighlight(i){ <br /> if (m_i > 0){ <br /> cancelHighlight('i'+m_i); <br /> } <br /> highlight('i'+i); <br /> } <br /> <br /> function handleKeyword(keycode){ <br /> if (!(m_i < 0 && keycode == 40) && keycode != 9 && keycode != 37 && !(m_i < 1 && keycode == 38) ) { <br /> showResult(keycode); <br /> if (m_i == -1) m_i = 0; <br /> } <br /> else { <br /> hideResult(); <br /> } <br /> } <br /> </script> <br /> </head> <br /> <body onclick="hideResult();"> <br /> <div id="search"> <br /> <input type="text" id="tel_search" name="tel_search" onkeyup="handleKeyword(event.keyCode);"/> <br /> <p>dhtml is fun </p> <br /> <div id="result"> <br /> <ul> <br /> <li id="i1" onmouseover="mHighlight(1);" onmouseout="cancelHighlight('i1');" onclick="setTextValue(1)">1erter</li> <br /> <li id="i2" onmouseover="mHighlight(2);" onmouseout="cancelHighlight('i2');" onclick="setTextValue(2)">2tttye</li> <br /> <li id="i3" onmouseover="mHighlight(3);" onmouseout="cancelHighlight('i3');" onclick="setTextValue(3)">3erter</li> <br /> <li id="i4" onmouseover="mHighlight(4);" onmouseout="cancelHighlight('i4');" onclick="setTextValue(4)">4tttye</li> <br /> <li id="i5" onmouseover="mHighlight(5);" onmouseout="cancelHighlight('i5');" onclick="setTextValue(5)">5erter</li> <br /> <br /> </ul> <br /> </div> <br /> </div> <br /> </body> <br /></html> <br /></code> <br />file: default.css <br /><code> <br />body {background-color: #e34;} <br />#search {background-color: #478; height: 4em;position: relative;} <br />#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;} <br />#result ul {background-color: #9de; list-style-type: none; padding:0; margin: 0} <br /> #result li {background-color:#de8; color: #bbb; padding:0; margin: 0.2em} <br /> .highlight {background-color: #9ab; cursor: pointer} <br /></code> Wed, 16 Jan 2008 20:27:58 GMT http://snippets.dzone.com/posts/show/4990 jrobertson (James Robertson)