I have gone through the autocomplete documentation and therefore changed the code to look like this;
function selectItem(li) { findValue(li); } function findValue(li) { if( li == null ) return alert("No match!"); // if coming from an AJAX call, let's use the id as the value if( !!li.extra ) var sValue = li.extra[0]; // otherwise, let's just display the value in the text box else var sValue = li.selectValue; alert("The value you selected was: " + sValue); } function formatItem(row) { if(row[1] == undefined) { return row[0]; } else { return row[0] + " (id: " + row[1] + ")"; } } $(document).ready(function(){ $("#example").autocomplete("test.php", { delay:10, lineSeparator: "^", cacheLength: 10, matchSubset:1, matchContains:1, cacheLength:10, onItemSelect: selectItem, onFindValue: findValue, formatItem: formatItem, autoFill: false }).result(function(a,data,c) { /**TODO:*/ });; }); But still doesn't seem to behave as expects. The backend php fetches the results and output it like this; while($row=mysql_fetch_array($result)){ if (strpos(strtolower($row['company_name']), $q) !== false) { echo '<li>'.($row['company_name']).'</li>'; } }