jQuery autocomplete function not working? - php

Question

I have a page where a user can click a button which says "Add a Skill" and then it should display an input box where you type in your skill, it should display another input box where your skill level should appear and then a horizontal slider where you select your skill level.
I have table in the database called 'skill_list' which has two columns: id and name. The name field will contain thousands of skills in it which you can select from.
I also need the functionality for it to only post the form if the skill exists in the database.
What I am asking is how to get the autocomplete working with jQuery based on my current code or could someone rewrite it slightly for me?
At the moment I have the following code and it throws up no errors in the firebug console and everything works aas normal but I'm really unsure what I have to do to get this working:
skills.php - auto() function (controller):
public function auto(){
$skill = $_POST['skill-0'];
$query = $this->db->query('SELECT * from skill_list WHERE name LIKE "'.$skill.'%" ORDER by name ASC LIMIT 10');
$data = array();
if ( $query && mysql_num_rows($query) ){
while( $row = mysql_fetch_array($query, MYSQL_ASSOC) ){
$data[] = array(
'label' => $row['name'],
'value' => $row['id']
);
}
}
echo json_encode($data);
flush();
}
skills.php (view)
<form method="post" action="skills/add" id="container">
<script>
$.fn.addSlide = function () {
return this.each(function () {
var $this = $(this),
$num = $('.slide').length++,
$name = $('<input type="text" class="inputField" id="autoskill" name="skill-' + $num + '" placeholder="What\'s your skill?"></div>'),
$slide = $('<br><div class="slide" id="slider-' + $num + '"></div><br>'),
$amt = $('<input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/><br>');
$this.append($name).append($amt).append($slide);
$slide.slider({
value: 0,
min: 0,
max: 5,
step: 1,
slide: function (event, ui) {
$amt.val(ui.value);
}
});
});
}
$('body').on('click', '.addNew', function(event) {
event.preventDefault();
$('#newFields').addSlide();
});
var count = 0;
$(document).ready(function(){
$('#autoskill').autocomplete({
source:'skills/auto', minLength:2
});
$('.addNew').click( function(event){
event.preventDefault();
$('#length').html(count);
count++;
});
$('.submitButton').click( function(event){
$('#container').append('<input type="hidden" name="count" value="' + count + '">');
});
});
</script>
<button class="addNew submitButton"> Add a Skill </button><br>
<div id="newFields"></div>
<input type="submit" class="submitButton" value="Save Skills">
</form>
Hopefully someone can help, Thanks!

Answer 1

make $name into this
$name = $('<input type="text" class="inputField" id="autoskill-'+$num+'" name="skill-' + $num + '" placeholder="What\'s your skill?"></div>'),
then after
$this.append($name).append($amt).append($slide);
add
$('#autoskill'+$num).autocomplete({
source:'skills/auto', minLength:2
});
and remove the autocomplete line completely from ur ready function
then for json make
$data[] = array(
'label' => $row['name'],
'value' => $row['id']
);
into
$data[$row['id']]=$row['name']