Autocomplete (PHP/Ajax/Javascript/jQuery/CSS) Tutorial/Code

Autocomplete

PHP Ajax Javascript jQuery CSS
Demo | Browse Category | Friday, February 10, 2012 by William Thomas

MySQL:

CREATE TABLE `your_database`.`content` (
`id` INT ,
`title` VARCHAR( 100 ) NOT NULL ,
`link` TEXT NOT NULL ,
`keywords` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;

HTML/jQuery:

var p = -1; //INTIAL VARIABLE UNTIL 'KEYUP/DOWN' IS PRESSED IN THE <input> TAG
$(function(){
$('#str').keyup(function(e){
e.preventDefault(); //PREVENTS DEFAULT 'keyup' and 'keydown' FUNCTIONS
var str = $(this).val(); //QUERY
var l = $('.item').length; //NUMBERS TOP RESULTS

//IF QUERY IS NOT EMPTY

if(str){
$('.list').show();

//IF 'ENTER' AND 'KEYUP/DOWN' ARE NOT PRESSED, REFRESH RESULTS

if(e.keyCode!=38&&e.keyCode!=40&&e.keyCode!=13){
p = 0;
$.get('results.php?q='+str, function(data){
$('.list').html(data); //DISPLAYS RIGHTS UNDER <input> TAG
});
}

//HIGHLIGHTS THE PREVIOUS RESULT

if(e.keyCode==38){
if(p>0){
p--;
} else {
p = l-1;
}

//FILLS THE "a" TAG TEXT IN THE INPUT

var res = $('.item:eq('+p+') a').text();
$('#str').val(res);
}

//HIGHLIGHTS THE NEXT RESULT

if(e.keyCode==40){
if(p<l-1){
p++;
} else {
p = 0;
}

//FILLS THE "a" TAG TEXT IN THE INPUT

var res = $('.item:eq('+p+') a').text();
$('#str').val(res);
}

//CSS HIGHLIGHTS THE SELECTED RESULT

$('.item').css({'background':'#ffffff'});
$('.item:eq('+p+')').css({'background':'#32baed'});

//IF 'ENTER' IS PRESSED, PAGE WILL REDIRECT TO THE LINK OF HIGHLIGHTED RESULT

var k = $('.item:eq('+p+') a').attr('href');
if(e.keyCode==13){
window.location = k;
}
} else {
$('.list').hide(); //HIDES RESULTS IF QUERY IS EMPTY
}
}).blur(function(){

//IF <input> IS NOT FOCUSED, THE RESULTS BECOME HIDDEN

$('body').click(function(){
$('.list').hide();
});
}).focus(function(e){

//IF <input> IS FOCUSED, THE RESULTS REAPPEAR, ONLY IF QUERY IS NOT EMPTY

e.preventDefault();
$('body').click(function(){
var str = $('#str').val();
if(str){
$('.list').show();
}
});
});
});

</script>

<style>

.autocomplete {

position: relative;

} .list {

border: 1px #32baed solid; display: none; position: absolute; top: 22px;

}

</style>

</head>
<body>
<div class="autocomplete">

PHP/Ajax:

results.php, where the results of the query will be displayed. Will go right under the input


<?php

mysql_connect("server", "username", "password");

$q = $_GET['q'];
$x = explode(' ', $q);
for($i=0; $i<count($x); $i++){
    $t = $x[$i];
    if($i==0){
        $a .= "keywords LIKE '%$t%'";
    } else {
        $a .= "OR keywords LIKE '%$t%'";
    }
}

$query = mysql_query("SELECT * FROM your_database.content WHERE $a LIMIT 0, 5");
while($r=mysql_fetch_array($query)){
     $top5 .= '<div class="item"><a href="'.$r['link'].'">'.$r['title'].'</a></div>';
}

echo $top5;

?>

Views: 137 Likes: 0 Dislikes: 0

Email:
Password:
	Keep me logged in

Email: