PHP - Autocomplete

I have a working autocomplete which connects to my database using ajax. I am trying to include a function where the user can scroll through the results list using the up/down arrow keys. All of the suggestions I found in google basically broke my autocomplete and yes I've installed the latest Jquery.   Also, for some reason the user has to click the upper half of the search result in order for the data to display otherwise it won't register for some reason any ideas about that?   Any help would be greatly appreciated. Thanks  

<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
 
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;    
});
 
jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
var yourLinkHref= $(this).attr('href');
    window.location = "mainpage.php?TopicName=" + $name;
});
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
 
});
</script>

I read this article. About two thirds down it mentions that you can turn off autocomplete on the entire form if you put it in the form tag. The post is from 2011 though so I was wondering if it is still valid? Does anyone know if this is still correct?
 
So, can I use something like;
 

<form action="example.php" autocomplete="off">
First name:<input type="text" name="fname">
Last name: <input type="text" name="lname">
E-mail: <input type="email" name="email">
<input type="submit">
</form>

Or do I need something like;
 

<form action="example.php">
First name:<input type="text" name="fname" autocomplete="off">
Last name: <input type="text" name="lname" autocomplete="off">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>

To be sure...
 
 

Hey guys im having 2 minor problems with my script if someone can give me some advise please? (all 2 problems are commented on the script itself)   1.  highlighting string characters when typed. 2. also im trying to add "Hide Suggestions" at the bottom of my menu so people can turn on/off autocomplete

$(document).ready(function()
{	
	function search_autocomplete(selector, tags, default_value)
	{	
		
		$('#' + selector).focus(function() 
		{
			if($('#' + selector).val() == default_value)
			{
				$('#' + selector).val('');
			}
		});
		
		$('#' + selector).blur(function() 
				{
					if($('#' + selector).val() == '')
					{
						$('#' + selector).val(default_value);
					}
				});
		
	    $('#' + selector).autocomplete(
	    {
	    	source: tags,
	    	timeout: 0,
	    	
	    	select: function (a, b) 
	    	{
	    		$(this).val(b.item.value);
	    	    //submit
	    	},
	    	
	    	create: function () 
	    	{
	            $(this).data('ui-autocomplete')._renderItem = function (ul, item) 
	            { 	
	            	// not highlighting when string characters match
	            	var re = new RegExp('^' + this.term);
	            	var t = item.label.replace(re, "<span id='dropdown-item-highlight'>" + "$&" + "</span>");
	            	
	            	
	                return $('<li></li>')
	                .append('<a>' + t + ' in ' + item.type + '</a>')
	                .addClass( 'dropdown-item' )
	                .appendTo(ul);
	                
	            };
	    	}
	    }); 
	    
	    $(this).data('ui-autocomplete')._renderMenu = function (ul, item) 
        { 	
	    	// unable to show "Hide Suggestions at the bottom of the autocomplete menu
    		return $('<ul></ul>')
    		.append('<a>Hide Suggestions</a>')
    		.addClass( 'dropdown-menu' );
        };
	
	}
	
	var availableTags = [{"label" : "XBOX 360", "type":"Electronics"},
	                     {"label":"XBOX One", "type":"Electronics"},
	                     {"label":"Nike", "type":"Clothing & Footwear"}];
	
	search_autocomplete('query', availableTags, 'Search...');
});

thanks

hi, here is my AutoComplete: http://www.mypubspace.com/phpsite/autoComplete/

At the moment it searched through rsPubName (Pub Names) and outputs Pub Name and rsTown(Town) aswell

I would like for the user to type a town and it show all pubs in that town?!


here is the PHP code
<?php
    
    // PHP5 Implementation - uses MySQLi.
    // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
    $db = new mysqli('***', '***' ,'***', '***');
    
    if(!$db) {
        // Show error if we cannot connect.
        echo 'ERROR: Could not connect to the database.';
    } else {
        // Is there a posted query string?
        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);
            
            // Is the string length greater than 0?
            
            if(strlen($queryString) >0) {
                // Run the query: We use LIKE '$queryString%'
                // The percentage sign is a wild-card, in my example of countries it works like this...
                // $queryString = 'Uni';
                // Returned data = 'United States, United Kindom';
                
                // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
                // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
                
                $query = $db->query("SELECT * FROM pubs WHERE rsPubName LIKE '$queryString%' LIMIT 10");
                if($query) {
                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                    while ($result = $query ->fetch_object()) {
                        // Format the results, im using <li> for the list, you can change it.
                        // The onClick function fills the textbox with the result.
                        
                        // YOU MUST CHANGE: $result->value to $result->your_colum
                         echo '<li onClick="fill(\''.$result->rsPubName.', '.$result->rsTown.'\');">'.$result->rsPubName.', '.$result->rsTown.'</li>';
                     }
                } else {
                    echo 'ERROR: There was a problem with the query.';
                }
            } else {
                // Dont do anything.
            } // There is a queryString.
        } else {
            echo 'There should be no direct access to this script!';
        }
    }
?>

and the Javascript
Code: [Select]
<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup
   
    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

I'm playing with this tokenizing autocomplete script but am having a strange issue with it.

It all seems to work ok and it's pulling the values over from the php file that's doing the db query ok and if you put in a value that doesn't match it will tell you so, however if you do type in a value that matches it simply disappears.

This script is exactly like the demo script except for the paths to the js, css, and php files, and I did remove the 1st example but was having this issue before removing it. No changes made to the js file, php file is identical to the demo just with my own db info and table info put in, and no changes to the css file compared to the demo.

I've tried this both with jquery 1.3.0 and 1.4.2 and have the same issue with both.

Here is the link to my test page:
http://www.erecoverydev.com/autocomplete2/autocomplete.html
Here is my js file:
http://www.erecoverydev.com/autocomplete2/jquery.tokeninput.js
Here is my php code:
Code: [Select]
<?
mysql_pconnect("localhost", "myuser", "mypass") or die("Could not connect");
mysql_select_db("mydb") or die("Could not select database");
 
$query = sprintf("SELECT cb_activities from jos_comprofiler WHERE cb_activities LIKE '%%%s%%' ORDER BY cb_activities DESC LIMIT 10", mysql_real_escape_string($_GET["q"]));
$arr = array();
$rs = mysql_query($query);

while($obj = mysql_fetch_object($rs))
{
    $arr[] = $obj;
}

echo json_encode($arr);
?>
A couple of values that are in my table are web development and kicking cats if you want to test it.

Here is the link to the demo:
http://loopj.com/tokeninput/demo.html

It just doesn't make any sense to me why the demo works and mine doesn't when they are basically identical.