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: (2246)
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:
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.
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
<!-- 1: include iframe -->
<iframe id="suggestions_iframe" style="display:none"></iframe>
<!-- 2:include js with core functions and style sheet-->
<link media="screen" href="pathToYourCssFile/suggestions_styles.css"
<!-- 3: declare html -->
<div class="outer_div_left_suggestions" style="margin-top:0px">
<input type="text" class="input_q_suggestions" id="searchBox1" style="width:280px" />
false, //set to true if you want to capitalize suggestions
false); //set to true if you want to search for phrases instead of words
Next, we will teach you how to customize this script to work with other types of suggestions, such as cities, names, or addresses.