I have been learning web2py moving from PHP and built an Ajax Live Search using Python(web2py) and JQuery.
WATCH THE VIDEO TUTORIAL ON YOUTUBE HERE : http://www.youtube.com/watch?v=jGuW43sdv6E
It's very simple, easy to use and easy to code, but i hope it helps somebody ... i discuss a more complex version of this on the web2py google group were thanks to Massimo Di Pierro im using an elegant way to return the html divs! ;-)
On the view (index.html)
#
Please Note : all the CSS and JS are on the same file beacuse its easier for me to expose it here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Ajax Live Search with web2py by Martin Sagastume</title>
<style type="text/css">
<!--
#ajaxresults{
background: #ffffff;
padding: 5px 10px;
max-height: 400px;
overflow: auto;
position: absolute;
z-index: 99;
border: 1px solid #A9A9A9;
border-width: 0 1px 1px 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
#ajaxresults a{
color:#666666;
}
input[type=text]{
font-size:12px;
color:#666666;
background-color:#ffffff;
padding-top:5px;
width:200px;
height:20px;
border:1px solid #999999;
}
//-->
</style>
<script type="text/javascript" src="{{=URL(r=request,c='static',f='jquery.js')}}"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
hide();
});
function getData(value){
if(value != ""){
$("#ajaxresults").show();
$.post("{{=URL(r=request,f='ajaxlivesearch')}}",{partialstr:value},function(result){
$("#ajaxresults").html(result);
});
}else{
hide();
}
}
function hide(){
$("#ajaxresults").hide();
}
function copyToBox(value){
$("#country").val(value);
hide();
}
</script>
</head>
<body>
<label for="country">Search country:</label><br />
<input type="text" id="country" name="country" autocomplete="off" onkeyup="getData(this.value);" /><br />
<div id="ajaxresults"></div>
</body>
</html>
On the controller (Default.py)
#
# -*- coding: utf-8 -*-
def index():
return dict()
def ajaxlivesearch():
partialstr = request.vars.values()[0]
query = db.country.printable_name.like('%'+partialstr+'%')
countries = db(query).select(db.country.printable_name)
items = []
for (i,country) in enumerate(countries):
items.append(DIV(A(country.printable_name, _id="res%s"%i, _href="#", _onclick="copyToBox($('#res%s').html())"%i), _id="resultLiveSearch"))
return TAG[''](*items)
On the model (db.py)
#
Please Note : Im using a SQLite Manage and using an SQL script to create the table, so i will just define the basic structure here and below you will see the SQL for the country table ;-)
db = DAL('sqlite://storage.sqlite')
db.define_table('country',
Field('iso'),
Field('name'),
Field('printable_name'),
Field('iso3'),
Field('numcode'))
SQL country Table grabbed from : http://snipplr.com/view.php?codeview&id=6636
#
Please Note: Im just adding some countries not all of them, to keep it short and simple.
CREATE TABLE IF NOT EXISTS country (
iso CHAR(2) NOT NULL PRIMARY KEY,
name VARCHAR(80) NOT NULL,
printable_name VARCHAR(80) NOT NULL,
iso3 CHAR(3),
numcode SMALLINT
);
INSERT INTO country VALUES ('UY','URUGUAY','Uruguay','URY','858');
INSERT INTO country VALUES ('UZ','UZBEKISTAN','Uzbekistan','UZB','860');
INSERT INTO country VALUES ('VU','VANUATU','Vanuatu','VUT','548');
INSERT INTO country VALUES ('VE','VENEZUELA','Venezuela','VEN','862');
INSERT INTO country VALUES ('VN','VIET NAM','Viet Nam','VNM','704');
INSERT INTO country VALUES ('VG','VIRGIN ISLANDS, BRITISH','Virgin Islands, British','VGB','092');
INSERT INTO country VALUES ('VI','VIRGIN ISLANDS, U.S.','Virgin Islands, U.s.','VIR','850');
INSERT INTO country VALUES ('WF','WALLIS AND FUTUNA','Wallis and Futuna','WLF','876');
INSERT INTO country VALUES ('EH','WESTERN SAHARA','Western Sahara','ESH','732');
INSERT INTO country VALUES ('YE','YEMEN','Yemen','YEM','887');
INSERT INTO country VALUES ('ZM','ZAMBIA','Zambia','ZMB','894');
INSERT INTO country VALUES ('ZW','ZIMBABWE','Zimbabwe','ZWE','716');
Comments (5)
0
iiit123 13 years ago
0
newnomad 13 years ago
0
select 14 years ago
0
mandriluy 14 years ago
0
mandriluy 14 years ago