What I want to do is to be able to load data from the database which will show up as an auto-complete text below the textbox. I'm using the ajax function in jquery to load data from the database. My problem now is how to put that data in the auto-suggest box.
<html>
<head>
<script src="js/jq.js"></script>
<link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
<link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
<script type="text/javascript" src="js/bigiframe.js"></script>
<script type="text/javascript" src="js/otocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example').keyup(function(){
var inpval = $('#example').val();
$.ajax({
type: 'POST',
data: ({p : inpval}),
url: 'query.php',
success: function(data) {
$("#yoh").autocomplete(data);
}
});
});
});
</script>
</head>
<body>
text: <input id="example" />
<div id="yoh"></div>
</body>
</html>
Are otocomplete.js/otocomplete.css the autocomplete plugin & its stylesheet? I'll assume that they are.
Is there a reason you are putting the autocomplete inside of an ajax method? It works without it.
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css">
<script src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example").autocomplete("query.php", {
width: 260,
selectFirst: false
});
});
</script>
Your php file should output one result per line, like so:
Gyr Falcon
Lanner Falcon
Red Falcon
...
This is all lifted straight from http://view.jquery.com/trunk/plugins/autocomplete/demo/ but I tested it, so I know it will work.
EDIT: I just read that the plugin's author no longer supports it, and recommends using jQuery UI's autocomplete. Personally, I'm not a big fan of jQuery UI, I just want the author's intent to be represented here.
EDIT 2: I didn't realize that you're trying to do some kind of custom UI for the auto suggest. Feel free to ignore this.
You have to add an event handler to your #example input.
For example you can add a .keyup() event handler and run your code after the first xx characters have been entered.