I am very new to jQuery. I am trying to use a plugin called Searchable Dropdown, that I got from here: http://jsearchdropdown.sourceforge.net/ . but I cannot figure out how to make it work.. What am I doing wrong?
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<?php
echo "<form method='post' action='' id='employeesselection'>
<select name='select_employee' id='select_employee'>";
while($row=mysql_fetch_array($employees)){
$selected = ($row['Id'] == $_POST['select_employee'])?'selected="selected"':'';
echo '<option '.$selected.' value="'.$row['Id'].'">'.$row['Etunimi'].' - '. $row['Sukunimi'].'</option>';
}
echo "</select></form>";
The select is working fine but searching in the select as the jQuery should enable, is not working.
Try also to give your code some semantic:
<?php
// DATABASE CONNECTION
// DATABASE QUERY
?>
<html lang="en">
<head>
<!-- CSS -->
</head>
<body>
<form action="" method="post" id="employeesselection">
<select name="select_employee" id="select_employee">
<?php while ( $row = mysql_fetch_array( $employees ) ) {
$selected = ( $row['id'] == $_POST['select_employee'] ) ? ' selected ' : '';
?>
<option <?php echo $selected ?> value="<?php echo $row['id'] ?>">
<?php echo $row['etunimi'] ?> - <?php echo $row['sukunimi'] ?>
</option>
<?php } ?>
</select>
</form>
<!-- All Javascript down here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("select").searchable();
});
</script>
</body>
</html>
Maybe the error isn't in your javascript but in php...
Good luck debugging!
I belive its to do with Jquery 1.9.1.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
With
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>