1

我有一个页面，用户可以单击一个显示“添加技能”的按钮，然后它应该显示一个输入框，您可以在其中键入技能，它应该显示另一个输入框，您的技能水平应该出现，然后是水平滑块您可以在其中选择您的技能水平。

我在数据库中有一个名为“skill_list”的表，它有两列：id 和 name。名称字段将包含数以千计的技能，您可以从中进行选择。

如果技能存在于数据库中，我还需要它仅发布表单的功能。

我要问的是如何根据我当前的代码让自动完成与 jQuery 一起工作，或者有人可以为我稍微重写一下吗？

目前我有以下代码，它在萤火虫控制台中没有引发任何错误，一切正常，但我真的不确定我必须做什么才能让它工作：

Skills.php - auto() 函数（控制器）：

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();

}

技能.php（查看）

<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>

希望有人能帮忙，谢谢！

4

1 回答 1

1

把 $name 变成这个

$name = $('<input type="text" class="inputField" id="autoskill-'+$num+'" name="skill-' + $num + '" placeholder="What\'s your skill?"></div>'),

然后

$this.append($name).append($amt).append($slide);

添加

$('#autoskill'+$num).autocomplete({
    source:'skills/auto', minLength:2
});

并从您的准备功能中完全删除自动完成行

然后为 json 制作

 $data[] = array(

                'label' => $row['name'],
                'value' => $row['id']

            );

进入

$data[$row['id']]=$row['name']
于 2013-08-10T22:53:04.880 回答