Simple Ajax Auto-Complete Example

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 input box below is enabled with auto-complete using a simple ajax example. The javascript can be seen here, the css can be seen here, and the php ajax function can be seen here. The input box below calls the getScriptPage javascript function if there are at least 2 characters present. That javascript function calls the php ajax function using a server request. The text sent back from the server by the php file is then handled by the handleHttpResponse javascript function, which just populates a hidden div with choices. The getScriptPage function makes that hidden div (with an id of “box”) visible if the response from the php ajax call is not empty.

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.

2 comments on “Simple Ajax Auto-Complete Example

  1. Pingback: The Essence of AJAX – How I learned it in an hour | Wily Code

  2. Pingback: How to use Ajax in a Wordpress Post | Wily Code

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge