domingo, 22 de marzo de 2009

Autocompletar campo / input de texto con jQuery y php

Archivo autocomplete.php:


<?php


if
(strlen($_GET['search-text'])

< 1)
{


print
'[]';


exit;


}



$terms
= array(


'jquery',


'javascript',


'java',



'xml',


'rpc',


'xhtml',


'html',


'php'



);


$possibilities
= array();


foreach
($terms as

$term) {


if
(strpos($term,
strtolower($_GET['search-text']))===

0) {


$possibilities[]
= "'".
str_replace("'",

"\\'",
$term)



."'";


}


}



print
('['.
implode(',
'
, $possibilities)
.']');



?>


Archivo que llama a autocomplete.php para obtener el listado de sugerencias:


<html>

<head>


<title>Auto
Complete
</title>



<script
type="text/javascript"
src="js/jquery.js"></script>


<script
type="text/javascript">



$(document).ready(function()
{



$('#search-text').attr('autocomplete',

'off');



var $autocomplete
= $('<ul
class="autocomplete"></ul>'
)




.hide()



.insertAfter('#search-text');



$('#search-text').keyup(function(){




$.ajax({



'url':
'autocomplete.php',



'data':

{'search-text':
$('#search-text').val()},



'dataType':
'json',




'type':
'GET',



'success':
function(data)
{




if (data.length){



$autocomplete.empty();



$.each(data,

function(index,
term){



$('<li></li>').text(term).appendTo($autocomplete)



.click(function()
{



$('#search-text').val(term);




$autocomplete.hide();



});



});



$autocomplete.show();




}



}



});



});


});


</script>



</head>


<body>


<input
id="search-text"
type="text"
name="search-text"

/>


</body>


</html>

No hay comentarios:

Publicar un comentario