jQuery Autocomplete with Codeigniter

This page went missing for a while because I deleted the old blog. Since you’re most probably coming from Codeigniter.com — my apologies.

The code is lying on my github account. You can find it here.

I found an old backup — here’s the original post:

The project I’m working on was crying out for autofill boxes etc all over the place. jQuery has a very nifty autocomplete plugin, but that works by building urls using the a ‘?’ followed by values — a GET instead of a POST. Hunting around, I found this – a modified autocomplete plugin by Dylan Verheul.

What caught my eye was the source code, where I could easily make out where he was building the URL. All I had to do was change the separator from a question mark or an ampersand to a slash (/). And the function was ready to rock and roll.

Here’s the javascript and HTML from the page:

<script type="text/javascript">
function selectName(li) {
 if (li.extra) {

$(document).ready(function() {
 $("#nameInputString").autocomplete("/index.php/rpc/name", { minChars:3, matchSubset:1, matchContains:1, cacheLength:10, onItemSelect:selectName, selectOnly:1 });

<input type="hidden" name="person_id" value="" id="person_id">
<input size="30" name="person_name" id="nameInputString" type="text" autocomplete="off"/>

And here’s what a simplified version of the CI controller looks like:

 function name($name)

  if (isset($name) && strlen($name) > 2)
    $dbObject = new Person();
    $dbObject->like("name", $name);
    foreach($dbObject->get()->all as $row)
     echo "$row->name|$row->id|\n";

This is what the CSS looks like:


.ac_input {
 width: 200px;
.ac_results {
 padding: 0px;
 border: 1px solid WindowFrame;
 background-color: Window;
 overflow: hidden;

.ac_results ul {
 width: 100%;
 text-align: left;
 list-style-position: outside;
 list-style: none;
 padding: 0;
 margin: 0;

.ac_results iframe {
 display:none;/*sorry for IE5*/
 display/**/:block;/*sorry for IE5*/

.ac_results li {
 margin: 0px;
 padding: 2px 5px;
 cursor: pointer;
 display: block;
 width: 100%;
 font: menu;
 font-size: 12px;
 overflow: hidden;
.ac_loading {
 background : url('/css/images/indicator.gif') right center no-repeat;
.ac_over {
 background-color: Highlight;
 color: HighlightText;





4 thoughts on “jQuery Autocomplete with Codeigniter”

  1. hi these tutorial for autocomplete using jquery is intriguing but i cant seem to figure out how exactly i add the files in my codeigniter project. Do i add them as assets ? Do i just use this code snippets above please help me out. Great work.

Leave a Reply

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