Type Ahead functionality in javascript

Posted on 2008-11-16
Last Modified: 2012-05-05
I have textbox and a DIV below it to show the suggestions.

<input type="text" class="text dropdown" id="qsfield" size="45" onkeypress="closeSuggest(this);loadList();suggest(this,'dropdown',searchListDropdowns);" />
<div id="qssuggest" class="suggest"></div>

where suggest()  is the function to populate the DIV with the array values (searchListDropdowns is the array name).

My problem is, if i press a key in my text box it shows up the div, and when i press the next character it disappears and when i press the next character it appears again.

For each and every character i press it should show me the div.

here is the suggest() function.

function suggest(searchBox, thisType, thisList)
  if((thisType == "dropdown" && suggestBox != document.getElementById(, "suggest")))  || (thisType != "dropdown" && searchBox.value.length > 2))
    keepSuggest = false;
    keepSuggest = true;
    suggestBox = document.getElementById(, "suggest"));
    suggestBox.innerHTML = ""; = (searchBox.offsetWidth - 2) + "Px"; = positionLeft(searchBox) + "Px";
    if(thisList || thisType == "dropdown")
      { thisList = dummyDropdowns; }
      suggestWords = getSuggest('', thisList);
    {  suggestWords = getSuggest(searchBox.value); }
    if(suggestWords.length > 0)
    { = "block";
      for(i=0; i<suggestWords.length; i++)
        suggestWordHL = suggestWords[i].replace(new RegExp("(" + searchBox.value + ")", "gi"), '<strong>$1</strong>')
        suggestBox.innerHTML += "<a href=\"#" + suggestWords[i] + "\" onclick=\"takeSuggest('" + + "', this); return false;\">" + suggestWordHL + "</a>";
      var suggestBoxBottom = suggestBox.offsetHeight + positionTop(searchBox) + searchBox.offsetHeight;
      var documentBottom = document.getElementsByTagName("body")[0].offsetHeight;
      var windowBottom = document.documentElement.scrollTop + document.documentElement.clientHeight;
      if(suggestBoxBottom > documentBottom || suggestBoxBottom > windowBottom)
      { = (positionTop(searchBox) - suggestBox.offsetHeight) + "Px"; }
      { = (positionTop(searchBox) + searchBox.offsetHeight) + "Px"; }

where suggest(searchBox, thisType, thisList) - Searchbox is the textbox name
thisType - is 'dropdown'
thisList - is the array that holds the values to display on the DIV.

any help appreciated.

Question by:gcmachel
    LVL 29

    Assisted Solution

    Part of the (ugly) inline js says:


    yet in the "suggest" function you say this:


    Is this correct?
    LVL 3

    Accepted Solution

    It looks like you're trying to reconstruct some built in functionality from the AJAX AutoCompleteExtender.  Give that a shot.
    LVL 75

    Expert Comment

    by:Michel Plungjan
    This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now