Erobo Software | Scripts: Javascript | Creating a Suggestions Dropdown for your Search Input Boxes

Scripts: Javascript :: Search engines :: Library Article #30

Developer's Section

Creating a Suggestions Dropdown for your Search Input Boxes
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr

Rating: \| Rate It:
Average Votes: (3211)
Favorites:

This article describes a javascript technique for creating a suggestions dropdown for your search input boxes.

In order to create a suggestions dropdown/autocompleter for you website you are going to need to download a basic js with core functionality, a style sheet to customize the search box and a few images for decoration. These files are available at the end of this tutorial and are mentioned below:

suggestions.js
suggestions_styles.css
suggestions_close.gif
ajax_busy.gif
[your_topic_suggestions]_suggestions.htm

The technique used to make this application work requires you to load an iframe into the page which may take 3-8 seconds depending on the user's connection. Therefore, the suggestions won't be available on the dropdown immediately. However, after the iframe is loaded the suggestions will come up faster than most autocompleters since the words are stored on the browser's memory.

Example:

��

When the words finish loading the ajax busy icon will dissapear and an x will show to indicate that the suggestions dropdown is now available.

The HTML code is shown below:

	Code Snippet 1

<iframe id="suggestions_iframe" style="display:none"></iframe>

<link media="screen" href="pathToYourCssFile/suggestions_styles.css"
type="text/css" rel="stylesheet">
<script type="text/javascript" src="pathToYourJsFile/suggestions.js"></script>

<div class="outer_div_left_suggestions" style="margin-top:0px">
   <input type="text" class="input_q_suggestions" id="searchBox1" style="width:280px" />
</div>

<div class="outer_div_right_suggestions">
  <ul id="dropdown_q_suggestions">
    <li id="main_li_suggestions">
      <a href="javascript:void(0);"
      id="trigger_sug" class="outer_div_link_suggestions" onclick="hideAutoCompleter();">
        <div class="panel_q_suggestions" id="panel_q_suggestions" >
          <img border="0" id="suggestions_load_image"
          title="loading suggestions..."
          class="suggestions_load"
          style="display:none" />
        </div>
        <div class="dropdown_bottom_suggestions"></div>
        <div class="dropdown_right_suggestions"></div>
      </a>
      <ul id="ul_suggestions">
        <li id="ul_level_suggestions">
          <div class="top_pad_suggestions" id="container_sug">
            <table width="100%"
            border="1"
            cellspacing="1"
            cellpadding="1"
            style="border: 0px solid #FFFFFF;font-size:12px;"
            id="suggestionsTbl">
            </table>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="outer_div_right_suggestions_btn">
  <input type="button"  value="Search" />
</div>



<script language="javascript">
  initAutoCompleter(0,-289 ,309);
  startSuggestionsDropDow("pathToImage/ajax_busy.gif",
                          "pathTo2Image/suggestions_close.gif",
                          "pathToSuggestionWords/[your_suggestions_type]_suggestions.htm"
                          false,  //set to true if you want to capitalize suggestions
                          false); //set to true if you want to search for phrases instead of words
</script>

Next, we will teach you how to customize this script to work with other types of suggestions, such as cities, names, or addresses.

See other Scripts in Search engines

Submit Your Scripts:

System Message:

Your Javascript script has been sent. Please allow 48 hours for processing.

If you would like to have your Javascripts published in this section please fill out
the form below: