I have a page where i have to display district drop down on selection of state dropdown. and then display postoffices dropdown on selection of distirict dropdown. then a autocomplete places input box on selection of postoffice dropdown.
i completed it successfully. but the autocomplete input box of places does not display options as per entered keywords, weather it displays all options what ever keyword is entered.
below is my php page :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$r = file('app_data/in.txt');
$states = array();
foreach($r as $value){
$x = explode("\t",$value);
//$india[] = array('pin'=>$x[1], 'place' => $x[2], 'state' => $x[3], 'dist' => $x[5] );
$states[] = $x[3];
}
$states = array_unique($states);
sort($states);
echo '<select id="state">';
foreach($states as $state){
echo "<option> $state </option>";
}
echo '</select>';
foreach($_POST as $post){
echo $post;
}
echo '<select id="dist">';
echo '</select>';
echo '<select id="postoffice">';
echo '</select>';
?>
<script>
$('#state').focusout(function (){
$.get('func-get-dist.php',{'state' : $(this).val()},function(data){
$('#dist').html(data);
});
});
$('#dist').focusout(function (){
$.get('func-get-dist.php',{'state' : $('#state').val(),'dist' : $(this).val()},function(data){
$('#postoffice').html(data);
});
});
$('#postoffice').focusout(function (){
var postoffice = $(this).val();
$('#tags').autocomplete({
source : ("func-get-dist.php?postoffice="+postoffice),
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<div id="test">
<div id="test1">
</div>
</body>
</html>
below is my html-get-dist.php page :
<?php
if(isset($_GET['postoffice']) && !empty($_GET['postoffice'])){
$postoffice = $_GET['postoffice'];
$r = file('app_data/in.txt');
$places = array();
foreach($r as $value){
$x = explode("\t",$value);
if(strtolower($x[7]) == $postoffice){
$places[] = strtolower(trim($x[2]));
}
}
$places = array_unique($places);
sort($places);
echo json_encode($places);
}elseif(isset($_GET['state']) && !empty($_GET['state'])){
if(isset($_GET['dist']) && !empty($_GET['dist'])){
$state = $_GET['state'];
$dist = $_GET['dist'];
$r = file('app_data/in.txt');
$posts = array();
foreach($r as $value){
$x = explode("\t",$value);
if(($x[3] == $state) && ($x[5] == $dist)){
//echo $x[6].'-'.$x[7].'-'.$x[8].'<br>';
$posts[] = $x[7];
}
}
$posts = array_map('strtolower',$posts);
$posts = array_unique($posts);
sort($posts);
foreach($posts as $postoffice){
echo '<option>'.$postoffice.'</option>';
}
}else{
$state = $_GET['state'];
$r = file('app_data/in.txt');
$dists = array();
foreach($r as $value){
$x = explode("\t",$value);
if($x[3] == $state){
$dists[] = $x[5];
}
}
$dists = array_unique($dists);
sort($dists);
foreach($dists as $dist){
echo '<option>'.$dist.'</option>';
}
}
}
?>
You compare the userinput with the entire value, try to do the comparison with the same number of characters as the user entered:
foreach($r as $value){
$x = explode("\t",$value);
$charCount = strlen($postoffice);
if(strtolower(substr($x[7], $charCount)) == strtolower($postoffice)){
$places[] = strtolower(trim($x[2]));
}
}
Edit: It took me some time to figure it out but I think I have solution. There are 2 mistakes in your code:
var postoffice = $(this).val();, but .val() returns the selected index of the selectbox, not the selected text.$x[7], this is the 8th tab separated column in you data, if my count is correct you only have 7 columns there.So my guess is that here you compare undefined with 0 and that returns true:
if(strtolower($x[7]) == $postoffice){
To solve this get the value in js like this:
var postoffice = $("option:selected", this).text();
... and use the correct index in the php comparison.