Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Type Ahead functionality in javascript

Posted on 2008-11-16
Medium Priority
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(searchBox.id.replace(/field/, "suggest")))  || (thisType != "dropdown" && searchBox.value.length > 2))
    keepSuggest = false;
    keepSuggest = true;
    suggestBox = document.getElementById(searchBox.id.replace(/field/, "suggest"));
    suggestBox.innerHTML = "";
    suggestBox.style.width = (searchBox.offsetWidth - 2) + "Px";
    suggestBox.style.left = positionLeft(searchBox) + "Px";
    if(thisList || thisType == "dropdown")
      { thisList = dummyDropdowns; }
      suggestWords = getSuggest('', thisList);
    {  suggestWords = getSuggest(searchBox.value); }
    if(suggestWords.length > 0)
      suggestBox.style.display = "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('" + searchBox.id + "', 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)
      { suggestBox.style.top = (positionTop(searchBox) - suggestBox.offsetHeight) + "Px"; }
      { suggestBox.style.top = (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

Badotz earned 1000 total points
ID: 22974381
Part of the (ugly) inline js says:


yet in the "suggest" function you say this:


Is this correct?

Accepted Solution

Stormjack earned 1000 total points
ID: 26482251
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
ID: 35763048
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

571 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