Member Avatar for greeny_1984

hi every one,
i want to create autocomplete for a search textbox in a site.can any one say how to create it using only javascript not ajax or other advanced options.
waiting for u r replies
bye

  • 3 Contributors
  • 4 Replies
  • 70 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

asked for a pure client-side autocomplete that works in IE6. posted an AJAX example, and correctly noted that persistent client storage in that era generally means cookies (localStorage was not available in IE6). For a JavaScript-only solution use a suggestion list embedded in the page (a small array rendered into the HTML when the page is generated) and a small absolutely positioned DIV to show matches. This keeps everything client-side and avoids network calls.

A minimal pattern that works with IE6 uses a static terms array, a simple onkeyup handler to find matches with indexOf, and click handlers on result rows to fill the textbox. Keep HTML-escaping in mind if terms come from an untrusted source.

<input id="q" type="text" />
<div id="suggestions" style="position:absolute;display:none"></div>

<script>
var terms = ["apple","apricot","banana","blueberry"];
var q = document.getElementById("q");
var box = document.getElementById("suggestions");

q.onkeyup = function(){
  var v = this.value.toLowerCase();
  if(!v){ box.style.display='none'; return; }
  var html = '';
  for(var i=0;i<terms.length;i++){
    if(terms[i].toLowerCase().indexOf(v) === 0){
      html += '<div class="item">'+terms[i]+'</div>';
    }
  }
  if(html){ box.innerHTML = html; box.style.display='block';
    var items = box.getElementsByTagName('div');
    for(var j=0;j<items.length;j++){
      items[j].onclick = function(){ q.value = this.innerText || this.innerHTML; box.style.display='none'; };
    }
  } else { box.style.display='none'; }
};
</script>

Notes: large lists should be trimmed server-side before embedding; escaping is essential to avoid XSS; add basic keyboard handling (arrow/enter) for usability; use cookies or IE userData only if persistence is required.

Recommended Answers

All 4 Replies

Member Avatar for greeny_1984

i want that script for internet explorer 6.0 browser

Member Avatar for ~s.o.s~

Maybe something like

Member Avatar for greeny_1984

hi, thanks for u r help,but i wnat the autocomplete using only java script not in ajax

Member Avatar for MidiMagic

Where are you planning to save the values to complete it with? A cookie is the only place you can save anything on the user's computer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.