hi, i am trying an example on how to implement a jquery/php auto suggestion
input field , you choose a country name after that when you start typing the
city name the jquery script will give you an auto suggested group of cities
names relating to what ever you typed....
this is the mian php page :
<?php require 'form.libs.php'; ?>
<html>
<head>
<script src="../jquery.min.js"></script>
<script
src="../jquery-validate/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('#registration_form').validate({
'rules': <?php echo
json_encode($form_rules); ?>,
'messages': {
'email': { 'remote': 'That
email address has already been registered.'
}
}
});
$('select[name="country"]').focus(function(){
if($('option',this).length<2)
$.getJSON('form.countries.php?country=' +
$(this).attr('value'),form_setCountries);
});
$('input[name="city"]').keyup(form_citySearch_delayed);
});
function form_citySearch(){
var
country=$('select[name="country"]').attr('value');
var txt=$('input[name="city"]').attr('value');
$.getJSON('form.cities.php?country='+country+'&city='+txt,form_citySearch_show);
}
function form_citySearch_delayed(){
if(window.citySearchTimeout)clearTimeout(window.citySearchTimeout);
window.citySearchTimeout=setTimeout(form_citySearch,500);
}
function form_citySearch_show(res){
if($('#citysearch_list'))$('#citysearch_list').remove();
if(!res.cities || !res.cities.length)return;
var el=$('input[name="city"]');
var pos=$('input[name="city"]').position();
var
style='position:absolute;left:'+pos.left+'px;top:'+(pos.top+el.height())+'px;border:1px
solid #000;background:#fff';
var html='';
for(idx in res.cities){
var city=res.cities[idx];
html+=' javascript:; '+city+' <br />';
}
$('<div id="citysearch_list"
style="'+style+'">'+html+'</div>').appendTo(el[0].parentNode);
$(document.body).click(function(){
$('#citysearch_list').remove();
});
}
function form_setCountries(res){
$('select[name="country"]')
.html(res.html)
.attr('selectedIndex',res.index);
}
</script>
</head>
<body>
<form id="registration_form" method="post"
action="form.submit.php">
<table>
<tr><th>Email</th><td><input name="email"
/></td></tr>
<tr><th>Password</th><td><input type="password"
id="passwordx"
name="passwordx" /></td></tr>
<tr><th>Password (repeat)</th><td><input
type="password" id="password2"
name="password2" /></td></tr>
<tr><th>Country</th><td><select
name="country"><option
selected="selected">Ireland</option></select></td></tr>
<tr><th>City</th><td><input name="city"
/></td></tr>
<tr><th colspan="2"><input type="submit"
/></th></tr>
</table>
</form>
</body>
</html>
this is the form.cities.php that should extract the related cities and echo
a jason string...
<?php
$cities=array(
'Ireland'=>array(
'Carlow', 'Cavan', 'Clare', 'Cork', 'Donegal', 'Dublin',
'Galway',
'Kerry', 'Kildare', 'Kilkenny', 'Laois', 'Leitrim', 'Limerick', 'Longford',
'Louth', 'Mayo', 'Meath', 'Monaghan', 'Offaly', 'Roscommon', 'Sligo',
'Tipperary', 'Waterford', 'Westmeath', 'Wexford', 'Wicklow'
)
);
$found=array();
if(isset($citi...@$_get['country']])){
$txt=strtolower(@$_GET['city']);
$len=strlen($txt);
foreach($cities[$_GET['country']] as $city){
if(substr(strtolower($city),0,$len)===$txt)$found[]=addslashes($city);
}
}
echo "{'cities':[";
if(count($found))echo "'".join("','",$found)."'";
echo "]}";
best regards...
--
View this message in context:
http://old.nabble.com/auto-suggestion-not-working-in-ie8-tp27658691s27240p27658691.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
