jQuery autocomplete

You are here:

Posted Jul 18 2010 by admin in PHP, jQuery with 0 Comments

Share

Auto-completion of search terms is an AJAX feature popularized by Google that reduces typing by listing possible keywords as the user types.

This article will show you the steps of building a auto suggestion box with PHP and jQuery (No autocomplete Plugin or any other components are needed). We’re going to check what a user has typed in, make a query on goolge via PHP and pass the results back in a suggestion list, all via an AJAX call in jQuery. This is a very basic and comprehensible solution with only a few lines of code. All you need is a little HTML form, a server-sided PHP Script and a little jQuery Script for the AJAX request and the suggestion box creation.View Demo

Let’s start with the PHP Script

This script makes a query on google and returns data in a javascript object. Of course you can connect to a MySQL database at this point instead of query google. Save the file as google_autocompletion.php.

header('Content-Type: text/plain; charset=utf-8');
$q = isset($_REQUEST['q']) ? $_REQUEST['q'] : '';
$url = "http://google.ch/complete/search?output=toolbar&q=%1";
$url = str_replace("%1",$q,$url);
 
$items = array();
$xml = simplexml_load_file($url,null,LIBXML_NOERROR|LIBXML_NOWARNING);
if($xml){
	foreach ($xml as $item) {
		array_push($items,($item->suggestion->attributes()->data));
	}
}
//return a javascript object
echo 'var result = {query:"'.$q.'",suggestions:["'.implode('","', $items).'"]};'

The JQuery

The jQuery is really the middle-man of the process, it’s going to handle all the front-end stuff. Save the file as script.js or copy it between the <head>-Tag of your html file.

$(function() {
	var q = $("#q");
	var d = $("<div></div>").addClass("container").css({width:q.outerWidth()-2,top:q.offset().top+q.outerHeight(),left:q.offset().left});
	d.hide();
	d.appendTo("body");
	var s=false;
	q.attr("autocomplete","off").keyup(function(e) {
		if(q.val().length==0){
			d.hide();
			s=false;
			return;
		}
 
		d.children().removeClass("selected");
		if (e.keyCode == 40){
			if(!s||s.next().length==0)
				s= d.children().first();
			else
				s = s.next();
 
			if(s.length>0)
				s.addClass("selected");
			return;
		}else if (e.keyCode == 38){
			if(!s||s.prev().length==0)
				s= d.children().last();
			else
				s = s.prev();
 
			if(s.length>0)
				s.addClass("selected");
			return;
		}else if(e.keyCode==13){
			window.location="http://www.google.com/search?q="+s.text();
		}
 
		$.ajax({ url: "google_autocompletion.php",type: "GET",data: "q="+q.val(),dataType: "script", success: function(data){
		var a = result.suggestions;
		d.empty().show();
 
		for(var i=0;i<a.length;i++);
                        var e=$("<span>"+a[i]+"</span>");
			e.hover(function(){
					s=$(this);
					s.addClass("selected");
				},function(){
					d.children().removeClass("selected");
				}).click(function(){
					window.location="http://www.google.com/search?q="+$(this).text();
				});
			d.append(e);
		}
		}});
	}).blur(function(){
		s=false;
		d.fadeOut("slow")
	});
});

The HTML form

Create a html file with a form and include the javascript above.

<html>
<head>
<style>
body {
  padding-top:100px;
  text-align:center;
}
.container{
  position:absolute;
  border:#000 solid 1px;
  text-align:left
}
.container span{
  display:block;
  background:#fff;
  color:#000
}
.container span.selected{
  background:#000;
  color:#fff
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Google Search</h1>
<form method="get" id="sf" action="http://www.google.com/search">
  <input type="text" value="" name="q" id="q" size="30"/>
  <input type="submit" id="submit" value="Search" />
</form>
</body>
</html>