Friday, 22 August 2014

jQuery Autocomplete

<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css" />
<script src="js/jquery/jquery-1.7.1.min.js"></script>

<script src="js/jquery/jquery.ui.autocomplete.min.js"></script>

jQuery autocomplete with jSON

<script>var data = [
{"label" : "Aragorn"},
{"label" : "Arwen"},
{"label" : "Bilbo Baggins"},
{"label" : "Boromir"},
{"label" : "Frodo Baggins"},
{"label" : "Gandalf"},
{"label" : "Gimli"},
{"label" : "Gollum"},
{"label" : "Legolas"},
{"label" : "Meriadoc Merry Brandybuck"},
{"label" : "Peregrin Pippin Took"},
{"label" : "Samwise Gamgee"}
];

</script>
<script>
$(function() {

$( "#search" ).autocomplete(
{
source:data
})
});
</script>

<input type="text" id="search" />

jQuery Ajax autocomplete in Cakephp

jQuery("#city").autocomplete(base_url+"/clientprofiles/getcity/",{
minChars:1,
cacheLength: 20,
extraParams: {
state: function() {
return $("#state").val();
},
country: function() {
return $("#country").val();
}
},
matchContains:1,
autoFill: false

});

getcity function

function getcity(){
$this->layout = 'ajax';
//pr($this->params['url']);
if($this->params['url']['state']!=""){
$cities = $this->Clientprofile->Company->City->find('all', array('conditions'=>array('State.name'=>$this->params['url']['state'], 'City.country_id'=>$this->params['url']['country'], 'City.name LIKE'=>$this->params['url']['q'].'%','City.pid is NULL'),'recursive'=>0, 'fields'=>array('City.name', 'City.id')));
} else {
$cities = $this->Clientprofile->Company->City->find('all', array('conditions'=>array('City.country_id'=>$this->params['url']['country'], 'City.name LIKE'=>$this->params['url']['q'].'%','City.pid is NULL'),'recursive'=>0,'fields'=>array('City.name', 'City.id')));
}
//echo "<pre>"; pr($cities);
$this->set('cities', $cities);

}

getcity ctp

<?php if(!empty($cities)) {
foreach($cities as $city) {
echo $city['City']['name']."\n";
 }
}

?>

Complete jQuery autocomplete example

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Demo</title>
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
</head>
<body>

<form action='' method='post'>
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {

//autocomplete
$(".auto").autocomplete({
source: "search.php",
minLength: 1
});

});
</script>
</body>
</html>

search.php

if (isset($_GET['term'])){
$term=$_GET['term'];
$result=mysql_query("SELECT country FROM countries WHERE country LIKE '%$term%'");
while($row=mysql_fetch_array($result))
{
$return_arr[] =  $row['country'];
}

}

0 comments:

Post a Comment