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) {
  $("#person_id").val(li.extra[0]);
  }
}

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

<input type="hidden" name="person_id" value="" id="person_id">
<label>Name:</label>
<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);
    $dbObject->limit(10);
    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*/
 position:absolute;
 top:0;
 left:0;
 z-index:-1;
 filter:mask();
 width:3000px;
 height:3000px;
}

.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;
}