In a previous post I wrote about how I learned ajax quickly, but recently I learned that the main link I learned from is no longer valid. So I decided to make a simple example I could host myself. Along the way I learned that it is not trivial to include ajax within a wordpress page, but I wrote another post about how I figured that out. 🙂
The database table being queried has 1000 rows in it, in the following format: name100 (where 100 is the number of the record, 1-1000). So if you start typing “name” in the box, after na you will start seeing 5 suggestions below. If you keep typing the suggestions will be updated as you type.
HTML code for input box
<div id="headersearch"> <div id="searchbar"> <div class="ajax-div"> <div class="input-div"> <input type="text" autocomplete="off" onKeyUp="if(this.value.length>1) getScriptPage('box','searchTerm','http://www.wilycode.com/'); else box(0);" name="searchTerm" value="Enter Name Here" onClick="if(this.value.substr(0,6)=='Enter ') this.value=''" id="searchTerm" onBlur="if(this.value.length<1) this.value='Enter Name Here'"> </div> <div id="box"></div> </div> </div> </div>
April 24th 2014 Update:
I was asked to add arrow navigation to an autosuggestion box I created this week using the method described above, and found that there are easier ways to do this. I found that jquery UI has an autocomplete widget which can be used to enable arrow key navigation among many other features. However I had trouble getting the examples at api.jqueryui.com/autocomplete/#entry-examples to work, so I did some more searching and found a step by step implementation using a php file for the source element of the autocomplete function which I was able to get working pretty easily, at www.pontikis.net/blog/jquery-ui-autocomplete-step-by-step.